如何在 CSS 中建立帶有邊框的透明三角形？

使用 CSS 創建帶邊框的透明三角形

CSS 中常見的挑戰之一是創建帶邊框的形狀。一種很難創建的形狀是具有可見邊框的透明三角形。

傳統方法

正如您在問題中提到的，一種常見的方法是使用邊框創建三角形的錯覺：

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

雖然此方法可以實現所需的形狀，但它涉及使用邊框技巧，這在某些情況下可能並不理想。

僅WebKit 的解決方案

為了更優雅的方法，您可以使用利用▲ 字元的僅WebKit 的解決方案：

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

此技術利用-webkit-text-lines 屬性在字元周圍創建筆劃，從而形成類似三角形的形狀。顏色屬性設定為透明，使角色本身不可見。

以上是如何在 CSS 中建立帶有邊框的透明三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！