CSS是一種非常強大和靈活的樣式語言，可以用來為網頁制作各種各樣的效果。其中，制作三角形也是CSS的一大特性。

// 制作向右的三角形
.triangle-right {
width: 0;
height: 0;
border-top: 10px solid transparent;    // 上邊框透明
border-bottom: 10px solid transparent; // 下邊框透明
border-left: 10px solid blue;          // 左邊框為實線
}
// 制作向左的三角形
.triangle-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid red;          // 右邊框為實線
}
// 制作向上的三角形
.triangle-up {
width: 0;
height: 0;
border-left: 10px solid transparent;  // 左邊框透明
border-right: 10px solid transparent; // 右邊框透明
border-bottom: 10px solid green;      // 下邊框為實線
}
// 制作向下的三角形
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid yellow;        // 上邊框為實線
}

通過設置寬度和高度為0，我們可以讓三角形的邊框只展現出其中的一部分，從而實現三角形的效果。通過調整各個邊框的樣式和顏色，我們可以制作出不同方向的三角形。

當然，我們也可以通過偽元素來實現三角形的制作，更加靈活，也更加容易維護。例如：

// 制作向右的三角形
.triangle-right::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
// 制作向左的三角形
.triangle-left::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid red;
}
// 制作向上的三角形
.triangle-up::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid green;
}
// 制作向下的三角形
.triangle-down::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid yellow;
}

通過偽元素，我們可以將三角形單獨生成一個元素，從而不會對其它元素造成影響。同時，我們也可以通過設置其寬高和邊框樣式與顏色來實現不同方向的三角形。