使用CSS 製作帶有邊框的透明三角形

用CSS 創建複雜的形狀可能具有挑戰性，但是對於三角形，有多種方法可以實現您想要的效果效果。

您已經嘗試過的一種方法涉及利用邊框。雖然這種技術有效，但它依賴視覺技巧。有沒有更優雅的解決方案？

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

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

▲

此程式碼利用文字描邊屬性將字元輪廓為三角形。顏色透明度允許內部保持空白，而字體大小控制形狀的大小。

雖然此解決方案特定於 webkit 瀏覽器，但它提供了一種簡潔且視覺上引人注目的方式來渲染透明三角形邊界。