使用偽元素建立 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中文網其他相關文章！
