HTML中的
標簽可以使用CSS樣式來繪制各種類型的圖形，使用
標簽的主要目的是為了區分出不同的元素，以便于對它們進行分類和樣式的定義。
div.square {
width: 100px;
height: 100px;
background-color: blue;
}
div.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}上面的代碼定義了兩個
標簽，一個是藍色的正方形，另一個是紅色的圓形。其中，
的CSS樣式定義了元素的寬度、高度和背景顏色，
則增加了一個圓角半徑的屬性來實現圓形的效果。
除了正方形和圓形，還可以通過CSS繪制三角形、梯形、菱形等各種圖形，只需在DIV標簽中定義不同的樣式即可。
div.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
div.trapezoid {
width: 200px;
height: 0;
border-top: 50px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
div.diamond {
width: 50px;
height: 50px;
background: yellow;
transform: rotate(45deg);
}上面的代碼分別繪制了三角形、梯形和菱形。其中，
的樣式定義了3 條邊的顏色和寬度，第4 條邊使用了透明的顏色隱藏起來，從而呈現出三角形的輪廓。而
則是通過控制固定的上底和下底來變換形狀的。
最后，
是通過CSS3的旋轉 transform 屬性來實現的。通過將元素旋轉 45 度，矩形的4個角變為了平行于 x 軸和 y 軸的4個角，形成了菱形的效果。
上一篇div css創建
下一篇div css后臺系統