我們可以使用純CSS實現繪制三角形的效果，這里介紹兩種常見的方法。 方法一：使用border屬性 當我們將四個border屬性的值設置為透明時，可以組成一個完整的正方形。我們可以利用邊框的寬度和顏色，通過只顯示需要的三個邊框，來繪制出三角形的形狀。

.triangle{
width: 0;
height: 0;
border-top: 50px solid #f00;  //上邊框為紅色，長度為50px
border-right: 50px solid transparent;  //右邊框為透明
border-bottom: 0px solid transparent;  //下邊框為透明
border-left: 50px solid transparent;  //左邊框為透明
}

方法二：使用transform屬性 我們可以使用transform屬性對元素進行旋轉、縮放等變換操作。我們在正方形上使用rotate變換將元素旋轉45度，然后使用skew變換將元素“傾斜”45度，就可以得到三角形的形狀。

.triangle{
width: 0;
height: 0;
border-top: 50px solid #f00;  //上邊框為紅色，長度為50px
border-right: 50px solid transparent;  //右邊框為透明
transform: rotate(45deg) skew(-45deg);  //將元素旋轉45度，然后傾斜45度
}

需要注意的是，我們使用的這種方法只能繪制等腰直角三角形。 通過上述的兩種方法，我們就可以使用純CSS繪制出三角形的效果，這樣能夠有效地減少不必要的代碼量和使用圖片等資源的情況，提高了網頁的加載速度，同時也便于維護和更新。