html问题
如上所示，如何实现左上角黑三角形的效果？
网页源码
<!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> 要实现左上角黑色三角形的效果，您可以使用 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:22
要实现左上角黑色三角形的效果，您可以使用 CSS 中的伪元素 ::before 或者 ::after 来创建一个绝对定位的元 ...
《真·黑三角形》 你没有实现你是怎么做出这个效果的。 sfqxx 发表于 2023-7-10 13:45
你没有实现你是怎么做出这个效果的。
? 歌者文明清理员 发表于 2023-7-10 13:46
?
？ 本帖最后由 编程追风梦 于 2023-7-10 15:55 编辑
用不着大动干戈的改啥，直接在CSS样式表里边添加代码：
.item:before {上面那段`styles/style.css`文件里面，我这里面用的是伪元素 `::before` 创建 `.item` 元素左上角的三角形，你要是想改可以用边框设置改一下颜色啥的，因为我就直接给三角形设置成了高度50px，颜色是黑色，不满意你自己改
改完以后然后保存一下，然后F5刷新应该就可以了，三角形会在带有 `.item` 类单元格里边
给我个最佳答案吧！！
我脚本有问题，打不过他们，求求给我个最佳答案！！
编程追风梦 发表于 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;
}
页:
[1]