[已解决]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;
}

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