CSS偽元素是在選擇器中使用的虛擬元素，它能夠讓我們在網頁中展示出某些效果。今天，我們要介紹一下如何借助CSS偽元素繪制三角。

/* 繪制一個向下的三角 */
.triangle-down::before{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
border: 10px solid transparent;
border-top-color: #000;
}
/* 繪制一個向上的三角 */
.triangle-up::before{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
border: 10px solid transparent;
border-bottom-color: #000;
}
/* 繪制一個向左的三角 */
.triangle-left::before{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
border: 10px solid transparent;
border-right-color: #000;
}
/* 繪制一個向右的三角 */
.triangle-right::before{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
border: 10px solid transparent;
border-left-color: #000;
}

上面的代碼中，我們通過設置偽元素before的border屬性，來達到繪制三角形的效果。其中，我們通過修改border-top-color、border-bottom-color、border-left-color、border-right-color屬性的取值來繪制出不同方向的三角形。

以上就是利用CSS偽元素繪制三角的方法了。當我們需要在網頁中展示一些圖標或者幾何形狀時，可以通過偽元素來實現，這種方式既能夠提升網頁的美觀度，又能夠節省網頁加載時資源的使用。