使用偽元素建立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);
}這裡，border-top 和 border-left 建立了三角形形狀，而rotate() 轉換將形狀傾斜為三角形。 position:absolute 和 left 和 top 屬性精確對齊三角形。
透過了解邊框和旋轉的機制，您可以使用偽元素有效地製作複雜的形狀。
以上是如何使用偽元素和邊框創建完美的 HTML/CSS 三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
