如何使用HTML/CSS偽元素正確建立三角形？

在HTML/CSS 中使用偽元素建立三角形

嘗試使用偽元素建立三角形時，某些使用者可能會遇到意想不到的結果。本文旨在解決常見問題並提供替代解決方案。

提供的初始程式碼使用邊框屬性，由於邊框模型的限制，無法產生所需的三角形。對於三角形，建議使用替代方法。

使用旋轉和邊框

要使用此方法建立三角形，請按照以下步驟操作：

1. 定義一個帶邊框的父定義一個帶有邊框的父元素作為三角形的底邊。
2. 建立一個偽元素將其放置在父元素內，並將其放置在基礎元素的上方並稍微偏向一側。
3. 使用transform:rotate(45deg)屬性將偽元素旋轉45度。
4. 加入邊框偽元素，保留右側空白以形成三角形的頂點。

對於範例：

.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);
}

<div class="box">

</div>

此方法利用旋轉屬性有效地建立所需的三角形。

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