[已解决]html问题

歌者文明清理员 · 发表于 2023-7-10 13:22:31

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如上所示，如何实现左上角黑三角形的效果？

网页源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dddddgz 官网</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<h1>你好，这里是 dddddgz 官网。</h1>
<p>dddddgz 目前有以下几项服务：</p>
<table>
<tr>
<td class="item" onclick="jumpTo('folders/1.html');" title="打开文件夹">
<table>
<td>
<img src="icons/python.ico" width="50" height="50">
</td>
<td>
技术交流区
</td>
</table>
</td>
<td class="white-item"></td>
<td class="item" onclick="jumpTo('folders/2.html');" title="打开文件夹">
<table>
<td>
<img src="icons/fishc.ico" width="50" height="50">
</td>
<td>
<span>友情链接</span>
</td>
</table>
</td>
</tr>
</table>
<script src="act/main.js"></script>
</body>
</html>

复制代码

最佳答案

月排行榜 / 总排行榜

编程追风梦

2023-7-10 15:56:07

编程追风梦发表于 2023-7-10 15:50
用不着大动干戈的改啥，直接在CSS样式表里边添加代码：
上面那段`styles/style.css`文件里面，我这里面用 ...

我写了代码，结果一点击确定编辑，就成这样了！！！

我这里重新打一下代码

.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid transparent;
}

复制代码

跳转到最佳答案楼层

陶远航 · 发表于 2023-7-10 13:22:42

要实现左上角黑色三角形的效果，您可以使用 CSS 中的伪元素 ::before 或者 ::after 来创建一个绝对定位的元素，并设置其边框样式和颜色来模拟三角形的效果。

以下是一个示例代码片段，演示如何使用 ::before 伪元素来实现左上角黑色三角形的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dddddgz 官网</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
.triangle {
position: relative;
width: 200px;
height: 200px;
background-color: #000;
}
.triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #000;
border-left: 100px solid #000;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

复制代码

在上面的示例中，我们创建了一个具有宽高为 200px 的容器 div，并给它添加了一个类名为 "triangle"。然后，通过设置这个 div 的伪元素 ::before 的样式，使用 border 属性创建了一个黑色的三角形。

您可以将这段代码嵌入到您的网页源码中，调整容器的大小和位置，来适应您的需求。

歌者文明清理员 · 发表于 2023-7-10 13:28:32

陶远航发表于 2023-7-10 13:22
要实现左上角黑色三角形的效果，您可以使用 CSS 中的伪元素 ::before 或者 ::after 来创建一个绝对定位的元 ...

《真·黑三角形》

sfqxx · 发表于 2023-7-10 13:45:25

你没有实现你是怎么做出这个效果的。

歌者文明清理员 · 发表于 2023-7-10 13:46:15

sfqxx 发表于 2023-7-10 13:45
你没有实现你是怎么做出这个效果的。

?

sfqxx · 发表于 2023-7-10 13:46:35

歌者文明清理员发表于 2023-7-10 13:46
?

？

编程追风梦 · 发表于 2023-7-10 15:50:07

本帖最后由编程追风梦于 2023-7-10 15:55 编辑

用不着大动干戈的改啥，直接在CSS样式表里边添加代码：

.item:before {

复制代码

上面那段`styles/style.css`文件里面，我这里面用的是伪元素 `::before` 创建 `.item` 元素左上角的三角形，你要是想改可以用边框设置改一下颜色啥的，因为我就直接给三角形设置成了高度50px，颜色是黑色，不满意你自己改
改完以后然后保存一下，然后F5刷新应该就可以了，三角形会在带有 `.item` 类单元格里边

给我个最佳答案吧！！
我脚本有问题，打不过他们，求求给我个最佳答案！！

编程追风梦 · 发表于 2023-7-10 15:56:07

编程追风梦发表于 2023-7-10 15:50
用不着大动干戈的改啥，直接在CSS样式表里边添加代码：
上面那段`styles/style.css`文件里面，我这里面用 ...

我写了代码，结果一点击确定编辑，就成这样了！！！

我这里重新打一下代码

.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid transparent;
}

复制代码

账号		自动登录	找回密码
密码			立即注册