CSS是前端開發中不可缺少的一部分，它可以幫助我們實現網頁的樣式布局，匹配HTML文檔，但你知道嗎？CSS也可以幫助我們去畫圖！今天我們就來一起學習一下如何利用CSS的偽元素去畫出各種各樣的圖形。

/* 矩形 */
.rect {
width: 100px;
height: 50px;
background-color: red;
}
/* 三角形 */
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid green;
border-bottom: 50px solid transparent;
}
/* 圓形 */
.circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
/* 橢圓 */
.oval {
width: 100px;
height: 50px;
background-color: yellow;
border-radius: 50%;
}
/* 菱形 */
.diamond {
width: 100px;
height: 100px;
background-color: purple;
transform: rotate(45deg);
}

代碼中，我們分別設置了五個不同的類名來定義不同的形狀，通過設置不同的屬性值，可以畫出所需要的圖形。其中，矩形通過設置寬高和背景色來實現，三角形通過設置邊框的寬度、顏色及其樣式來實現，圓形通過設置圓角半徑實現，橢圓通過設置圓角半徑且寬高不相等實現，菱形則通過利用CSS3中的旋轉變換進行實現。

通過上述五個形狀的示例，我們可以深刻的認識到CSS的強大之處，它不僅可以幫助我們完成樣式的布局，同時也可以幫助我們實現想象中的圖形。相信大家掌握了本篇內容后，在實踐中也能夠更加靈活的運用CSS去畫出更多有趣的圖形。