在網頁設計和開發中，我們經常會遇到需要使用三角形進行裝飾或指示的情況，而CSS提供了一種簡單又方便的方法來實現頂部三角形的效果。

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

這里我們生成一個寬度為0、高度為0的div，同時設置其上下邊框為透明（border-left和border-right），左右邊框大小相等來設置邊角大小（border-bottom），并且設置邊角顏色，從而形成一個等腰直角三角形。

我們還可以通過旋轉的方法來實現不同方向的三角形，比如左右兩側的三角形：

.triangle.left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #f00;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
transform: rotate(90deg);
}
.triangle.right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #f00;
transform: rotate(-90deg);
}

通過設置邊框顏色和方向，并配合transform屬性的旋轉，我們可以輕松地實現左右兩側的各種三角形，為網頁設計帶來更加多樣化的效果。