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