使用 CSS 制作带边框的透明三角形

用 CSS 创建复杂的形状可能具有挑战性，但是对于三角形，有多种方法可以实现您想要的效果效果。

您已经尝试过的一种方法涉及利用边框。虽然这种技术有效，但它依赖于视觉技巧。有没有更优雅的解决方案？

是的，有！ Webkit 独有的方法涉及利用 Unicode 字符 U 25B6 (▲)。方法如下：

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

▲

此代码利用文本描边属性将字符轮廓为三角形。颜色透明度允许内部保持空白，而字体大小控制形状的大小。

虽然此解决方案特定于 webkit 浏览器，但它提供了一种简洁且视觉上引人注目的方式来渲染透明三角形边界。