有三角形 Unicode 字符。您可以在 SVG 中绘制三角形。但还有另一种在 Web 上绘制三角形的方法,只需使用 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;
}