CSS是一種用于設計和布局網頁界面的語言。除了設置文本和顏色之外，CSS還可以用來繪制各種形狀。在這篇文章中，我們將介紹如何使用CSS繪制各種基本形狀。 首先，我們需要知道如何使用CSS來選擇元素。在CSS中，可以使用標簽名，類名，ID或屬性選擇器來選擇元素。例如： ```html

這是一個圓形

``` ```css .circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; } ``` 在上面的例子中，我們使用了類選擇器來選擇一個圓形元素，并使用CSS屬性來定義它的寬度，高度，邊框半徑和背景顏色。這樣我們就可以畫出一個紅色的圓形。 接下來，我們將在pre標簽里面展示如何通過CSS繪制不同的形狀： ```html

/* 畫一個圓形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
/* 畫一個正方形 */
.square {
width: 100px;
height: 100px;
background-color: blue;
}
/* 畫一個三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
/* 畫一個梯形 */
.trapezoid {
width: 100px;
height: 0;
border-bottom: 100px solid orange;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
/* 畫一個菱形 */
.diamond {
width: 0;
height: 0;
border: 50px solid blue;
border-top-color: transparent;
border-bottom-color: transparent;
transform: rotate(45deg);
}

``` 在上面的代碼中，我們定義了5個不同的CSS類來繪制圓形，正方形，三角形，梯形和菱形。可以看到，在創建圓形時，我們使用了CSS的`border-radius`屬性，并將它設置為50%來形成一個圓形。對于正方形，我們只是設置元素的寬度和高度，對于三角形，我們設置了其寬度和高度為0，并使用`border`屬性來指定四個邊框以形成三角形。在繪制梯形時，我們使用了`border`屬性和`transform`屬性來將一個矩形旋轉為梯形。在繪制菱形時，我們使用了`border`屬性來制定四個邊框，然后使用`transform`屬性旋轉45度。 總之，在CSS中，可以使用各種不同的屬性和技巧來創建各種形狀。這些形狀可以讓我們的網頁看起來更加有趣和有吸引力。