如何用 CSS 畫圖形

CSS 是一門強大的設計語言，它不僅可以裝飾 HTML 頁面，還可以通過 CSS 屬性來繪制簡單的圖形和動畫效果。在本文中，我們將介紹如何使用 CSS 來繪制不同種類的基本圖形。

繪制矩形

要畫一個矩形，我們可以使用width和height屬性來定義其大小，background-color屬性來定義其顏色。

.rectangle {
width: 200px;
height: 100px;
background-color: #F5DEB3;
}

繪制圓形

要畫一個圓形，我們需要使用border-radius屬性來設置圓形的半徑，將它設為圓形的直徑的一半。

.circle {
width: 100px;
height: 100px;
background-color: #87CEFA;
border-radius: 50%; 
}

繪制三角形

要畫一個三角形，我們可以使用border屬性的技巧。我們可以使用一個小的透明矩形作為容器，然后使用邊框進行繪制。讓兩個邊框透明，而要繪制的邊框設置為非透明的顏色，這樣就可以繪制一個三角形了。

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #7FFF00;
}

繪制梯形

要畫一個梯形，我們可以使用transform: skew()來傾斜兩條邊，然后固定它們的寬度。

.trapezoid {
width: 200px;
height: 100px;
background-color: #FFDAB9;
transform: skew(20deg);
margin-left: 30px;
}

繪制菱形

要畫一個菱形，我們可以使用transform: rotate()屬性來旋轉一個正方形。

.diamond {
width: 100px;
height: 100px;
background-color: #FFE4E1;
transform: rotate(45deg);
}

到此為止，我們已經(jīng)介紹了使用 CSS 繪制幾種基本圖形的方法。你可以通過調(diào)整這些屬性來調(diào)整圖形的大小、顏色和形狀，打造出自己的設計。祝你繪圖愉快！