【CSS】边界三角形

有三角形 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;
}