CSS是現(xiàn)在web開發(fā)中不可或缺的一部分，它可以實現(xiàn)許多不同的效果。今天我們將學(xué)習(xí)如何用CSS繪制三角形。

實現(xiàn)這個效果非常簡單，只需要一個 div 元素和border屬性就可以了。border屬性是一個包含樣式、寬度和顏色的組合。我們可以利用border的樣式和寬度來繪制出三角形。

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

在這個例子中，我們先聲明一個div元素，然后給它一個寬度和高度都為0的大小。接下來，我們設(shè)置border-top和border-bottom屬性來繪制出三角形的上下兩條邊。其中，border-top的寬度是50像素，顏色是透明的，border-bottom的寬度也是50像素，顏色同樣也是透明的。

最后，我們設(shè)置border-right屬性來用紅色填充三角形的右側(cè)。border-right的寬度是100像素，顏色是紅色，這樣就能讓三角形完整形成。

如果需要繪制不同形狀的三角形，只需要調(diào)整 border-top、border-right 和 border-bottom 的大小、顏色和樣式即可。

繪制以上代碼可以得到一個紅色的等腰三角形。這就是利用CSS實現(xiàn)三角形的方法。