如何使用偽元素創建完美的 CSS 三角形？

帶有偽元素的 CSS 三角形

在嘗試使用偽元素複製三角形時，可能會遇到困難，如所提供的螢幕截圖所示。為了解決這個問題，讓我們來探索替代方法。

原始程式碼利用邊框來建立三角形。然而，由於其固有的屬性，邊界並不適合此目的。相反，旋轉和邊框的組合可以產生更準確的結果。

以下程式碼片段提供了一個解決方案：

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

此程式碼根據需要定位偽元素，利用旋轉來建立三角形。邊框屬性確保形狀尺寸的準確性。

以上是如何使用偽元素創建完美的 CSS 三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！