CSS中的三角形指的是利用CSS屬性畫出來的三角形形狀。實現(xiàn)起來很簡單，只需要用到CSS的border，以及一些margin和padding進(jìn)行調(diào)整。下面我們就來詳細(xì)講講CSS畫三角形的方法。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid red;
border-right: 50px solid transparent;
}

上述代碼實現(xiàn)了一個等邊三角形，即三條邊的長度相等，每個角都是60度。主要用到border-top，border-left和border-right這三個屬性。其中，border-top定義了三角形的高度，border-left和border-right則定義了三角形的兩條底邊，且其中一個設(shè)置為透明。

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
}

除了等邊三角形外，我們還可以實現(xiàn)不等邊的三角形。上述代碼實現(xiàn)了一個箭頭向上的三角形，同樣用到了border屬性。其中，border-left和border-right設(shè)置為透明，只有border-bottom有顏色，即定義了箭頭的長度。

.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid red;
}

同理，我們可以上述代碼實現(xiàn)箭頭向下的三角形，只需將border-top替換為border-bottom即可。

總結(jié)來說，CSS畫三角形只需要用到border屬性，通過不同的border組合和一些邊距調(diào)整就可以實現(xiàn)不同形狀的三角形。同時，CSS畫圖的好處在于可以避免使用圖片導(dǎo)致頁面加載速度慢，減少網(wǎng)頁資源的請求次數(shù)，提高頁面性能。