為什麼我的 CSS 偽元素三角形會變形，如何修復它們？

使用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中文網其他相關文章！