在CSS中,我們可以利用border實現(xiàn)空心的三角形,下面是實現(xiàn)的代碼:
.triangle { width: 0; height: 0; border: 20px solid transparent; border-top-color: #333; border-bottom: none; border-left: none; border-right: none; }
首先,設(shè)置容器的寬度和高度為0,然后利用border屬性設(shè)置四個方向的邊框?qū)挾葹?0px。因為是要畫出空心的三角形,所以要將三角形的三條邊設(shè)置為透明,只留下一條上邊框(即border-top-color)。
這樣,就可以畫出一個空心的等腰三角形了。如果需要畫直角三角形或其他任意形狀的空心三角形,可以調(diào)整邊框的樣式和顏色。