CSS繪製圖標基礎

CSS的功能不僅侷限在調整元素樣式上，繪製圖形也是可行的。下面是其繪製圖形的基本圖形：

1. 三角形

.triangel {
width:0;
height:0;
border-top:10px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent; 
}

2.圓形

.circle {
width:10px;
height:10px;
background: red;
border-radius: 10px;
}

3.梯形

.trapezoidal{
width:10px;
height:0px;
border-top:20px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent;
}

4.平行四邊形

.parallelogram{
width:20px;
height:20px;
border:1px solid red;
transform: skew(20deg,0);
-webkit-transform: skew(20deg,0);
-moz-transform: skew(20deg,0);
-ms-transform: skew(20deg,0);
-o-transform: skew(20deg,0);
}

其他的圖形可以根據簡單圖形進行處理，拼接可以得出。CSS的強大還待繼續學習，(*^__^*) 。