CSS畫三角形是前端開發中必不可少的一項技能，在許多開發中都會用到。本文將從基礎的三角形繪制開始介紹。

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

上述CSS代碼可以繪制一個紅色三角形。通過設置border-top、border-bottom、border-right，分別代表三角形上邊、下邊和右邊的樣式。需要注意的是，三角形的高度和寬度都要設置為0，這是因為三角形是通過邊框組成的，所以沒有必要設置寬度和高度。

.triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}

上述CSS代碼可以繪制一個藍色朝上的三角形。通過設置border-left、border-right、border-bottom，分別代表三角形左邊、右邊和下邊的樣式。同樣需要注意的是，三角形的高度和寬度都要設置為0。

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

上述CSS代碼可以繪制一個綠色朝下的三角形。同樣地，使用border-left、border-right、border-top來繪制三角形。

通過這樣的方式，你可以快速地繪制各種顏色、大小、方向的三角形，豐富你的頁面設計。