為什麼我的 CSS 偽元素三角形形狀錯誤？

使用偽元素建立 HTML/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);
}

<div class="box"></div>

此方法將旋轉的偽元素與邊框結合以產生所需的三角形。指定的旋轉角度決定了​​三角形的方向。

以上是為什麼我的 CSS 偽元素三角形形狀錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！