CSS繪制圖形是CSS的一個重要部分，它可以使網站設計更加靈活，同時也能夠節約大量的圖片資源，提高網站的性能。接下來，我們將學習如何使用CSS來繪制一些基本的圖形。 在CSS中，通過設置元素的border屬性可以繪制簡單的形狀，例如正方形、圓形、三角形等等。下面是一個繪制正方形的例子：

繪制正方形：

.box {
width: 200px;
height: 200px;
border: 1px solid blue;
}

這個例子中，我們設置了一個div元素的寬度和高度都為200像素，然后設置了一個1像素寬的藍色邊框，就可以得到一個寬度和高度相等的正方形了。 同樣的方式，我們可以繪制圓形：

繪制圓形：

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: blue;
}

這個例子中，我們同樣設置了一個div元素的寬度和高度都為200像素，但是將border-radius屬性設置為50%，表示將邊框半徑設置為div元素寬度的50%，從而得到了一個圓形。同時，我們還設置了背景顏色為藍色，使圓形更加明顯。 除了簡單的圖形，我們還可以使用CSS繪制更加復雜的形狀，例如三角形：

繪制三角形：

.triangle {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

這個例子中，我們設置了一個div元素的寬度和高度都為0，表示該元素是不可見的。然后，我們使用border-top屬性繪制了一個紅色的三角形，同時使用border-right屬性使三角形的右邊變成透明的。這樣，我們就得到了一個直角等腰三角形。通過控制border-top和border-right屬性的值，我們還可以繪制其他類型的三角形。 繪制圖形是CSS設計的一個重要部分，通過學習以上的例子，我們可以掌握一些基本的技巧，從而在網站設計中更加靈活地運用CSS。