CSS的盒子模型非常重要，可以讓我們輕松掌握頁面元素的布局和樣式，其中最常見的就是正方形和矩形的盒子，但是有時候我們需要使用一些特殊的形狀來裝飾頁面，比如三角形。

.triangle{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #f00;
border-bottom: 50px solid transparent;
}

上面的代碼實現了一個紅色的三角形盒子，其中width和height設置為0，是因為我們希望通過border來定義三角形，border-top和border-bottom設置為transparent，讓上下兩條邊不可見，而border-left設置為顏色，則形成了一個左側傾斜的三角形。

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

如果需要右側傾斜的三角形，代碼稍有不同，需要將border-right設置為顏色。

.triangle-top{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #00f;
}

如果需要朝上的三角形，同樣的思路，只需將border-bottom設置為顏色即可。

以上代碼只是三角形盒子的基本實現方式，實際使用中還有很多細節需要注意，但通過對CSS盒子模型的深入了解，掌握三角形盒子的制作也不是難事。