CSS是一種強大的樣式語言，可以實現很多有趣的效果。其中，繪制三角形是一個常見的需求。下面我們來介紹一下CSS中如何畫各種三角形。

1. 左右箭頭

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 15px solid #333;
border-bottom: 10px solid transparent;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 15px solid #333;
border-bottom: 10px solid transparent;
}

2. 上下箭頭

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #333;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #333;
}

3. 等腰三角形

.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #333;
}

4. 直角三角形

.triangle-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid #333;
border-bottom: 60px solid #333;
}
.triangle-bottom {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #333;
}

5. 任意角三角形

.triangle-any {
width: 0;
height: 0;
border-left: 50px solid #333;
border-right: 50px solid transparent;
border-bottom: 100px solid transparent;
transform: rotate(45deg);
}

以上就是幾種常見的三角形的繪制方法了。通過掌握這些技巧，我們可以輕松實現各種有趣的效果。