CSS可以完成很多形狀的設(shè)計，其中之一就是繪制空心三角形。使用CSS繪制三角形有多種方法，但是使用偽元素來創(chuàng)建空心三角形是最方便且兼容性最好的方法。

.triangle {
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000000;
}
.triangle:before {
content: "";
position: absolute;
top: -20px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-top: 50px solid #000000;
}

上面的CSS代碼首先設(shè)置了一個具有50像素邊長的黑色底部三角形。接著，我們通過:before偽元素繪制出一個白色的上部三角形來實(shí)現(xiàn)空心效果。:before偽元素被絕對定位在父元素的頂部，使其與父元素重合。通過調(diào)整:before偽元素的邊框，我們得到了一個空心三角形。

如果想要四個角都畫成空心三角形形狀，只需要把上述代碼應(yīng)用到四個不同的元素中，分別通過left、top、right、bottom屬性調(diào)整它們的位置。這樣做可以避免注釋掉某些元素使得代碼難以維護(hù)。

在CSS中使用偽元素可以輕松地創(chuàng)建各種形狀和效果，讓我們在布局中更加靈活和多樣化！