存在三角形 Unicode 字符。您可以在 SVG 中绘制一个三角形。但还有一种方法可以在网页上绘制三角形，它只涉及 border 属性和一些 CSS 技巧。
想象一个带有厚边框的元素
.triangle {
width: 200px;
height: 200px;
border: 10px solid black;
}
现在想象所有四条边框都有不同的颜色
.triangle {
...
border-left-color: red;
border-right-color: yellowgreen;
border-top-color: orange;
border-bottom-color: rebeccapurple;
}
注意边框如何以角度相互交汇？
看看当我们将元素的宽度和高度都缩放到零时会发生什么
.triangle {
...
width: 0;
height: 0;
}
如果其中三条边框是 transparent，我们将得到一个三角形！
.triangle {
...
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rebeccapurple;
}
不错。
这在类似指向文本气泡的元素上可能很有用。在这种情况下，您可以通过伪元素将三角形添加到另一个元素。以下是一个 完整示例
