在網頁設計中，我們有時需要使用各種形狀來裝飾頁面。比如，我們需要一個圓形或一個三角形。那么，如何使用 CSS 來繪制這些形狀呢？

// 圓形
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
// 三角形
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #f00; /* 改變邊框顏色可改變三角形顏色 */
border-right: 50px solid transparent;
}

以上代碼演示了如何使用 CSS 繪制圓形和等腰三角形。它們都是使用 CSS 的 border-radius 屬性來實現的。border-radius 屬性可以將一個方形元素的邊框角變得圓滑。

除了這些基本的形狀，CSS 還可以繪制更多的形狀。比如，我們可以繪制一個扇形，一個菱形或者一個梯形。

// 扇形
.sector {
width: 0;
height: 0;
border-radius: 100% 0 0 0;
border-top: 100px solid #f00; /* 改變邊框顏色可改變扇形顏色 */
}
// 菱形
.rhombus {
width: 100px;
height: 100px;
transform: rotate(45deg); /* 將正方形元素旋轉45度 */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%); /* 裁剪元素 */
}
// 梯形
.trapezoid {
width: 200px;
height: 80px;
border-bottom: 80px solid #f00; /* 改變邊框顏色可改變梯形顏色 */
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

以上代碼演示了如何使用 CSS 繪制扇形、菱形和梯形。它們都是通過組合使用 CSS 的 border-radius 屬性、transform 屬性和 clip-path 屬性來實現的。

總之，通過 CSS，我們可以繪制出各種形狀來豐富網頁的設計。以上代碼只是其中的一部分，而實際上還有很多其他的形狀可以繪制。不過，在實現這些形狀時，我們需要注意瀏覽器的兼容性問題。