DIV CSS 佈局教程網

利用css畫圖形，是個有利有弊的寫法，好處是不用畫圖，且節省了一些流量，壞處是要寫長串的css樣式，而且有可能流量並沒有減少，用與否視情況而定，個人選擇。

下面是我做測試的一些圖形，也是參考了一些網站，簡單的注解一下和歸納了一下，其中並沒涉及到復雜的css畫圖形。

其中用了css3.0的一些屬性，所以這裡聲明：請用支持css3.0的浏覽器看此文章！

正方形

矩形

梯形

平行四邊形

上面這幾個相對比較簡單,沒什麼可解釋的,看下面源碼：

/*正方形*/
.Square { width: 100px; height: 100px; background: #669; }
/*矩形*/
.rectangle { width: 200px; height: 100px; background: #669; }
/*梯形*/
.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
/*平行四邊形*/
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }

向上三角

向下三角

向左三角

向右三角

左上三角

右上三角

左下上三角

右下上三角

上下三角

上面這些三角，其實也很常見，主要原理是利用了相鄰兩個邊框的接壤處分配原則，如果沒有寬度和高度的話，其實應該是四個三角形接成的矩形，下面是上面圖形的源碼：

/*三角形*/
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; }
.triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669; }
.triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-updown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669;position:relative;margin-bottom:50px}
.triangle-updown:after {content:" "; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669;position:absolute;top:50px;left:-50px;}

.triangle-topleft { width: 0; height: 0; border-top: 100px solid #669; border-right: 100px solid transparent; }
.triangle-topright { width: 0; height: 0; border-top: 100px solid #669; border-left: 100px solid transparent; }
.triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #669; border-right: 100px solid transparent; }
.triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #669; border-left: 100px solid transparent; }

 看下面例子，清楚的標明了，四個邊的情況，上面的三角形都是利用了這個原理，讓不想顯示的邊框透明transparent：

<div style="border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;width:0px;height:0px;"></div>

圓形

同心圓形

上半圓形

下半圓形

左半圓形

右半圓形

左上四分之一圓形

右上四分之一圓形

右下四分之一圓形

左下四分之一圓形

 其實這個跟上面畫三角形的原理很相似，都是利用相鄰邊框接壤的配原則。另還主要利用了css3.0的圓角屬性 border-radius 適當的調整大小會有不同的效果！結合border-width調整，可以得到不同的圖形。

當然適當的調整角度和組合，可以得到更多的圖形。

/*圓形 主要利用了css3.0的圓角屬性 border-radius 適當的調整大小會有不同的效果*/
.circle { width: 100px; height: 100px; background: #669; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.circle-circle { width: 100px; height: 100px; border:20px solid #669;background: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }

.circle-up { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;border-right:100px solid #669;  -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; }
.circle-down { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-right:100px solid #669;  -moz-border-radius:0 0 100px 100px; -webkit-border-radius:0 0 100px 100px; border-radius:0 0 100px 100px; }
.circle-left { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669;  -moz-border-radius:100px 0 0 100px; -webkit-border-radius:100px 0 0 100px; border-radius:100px 0 0 100px; }
.circle-right { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669;  -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:0 100px 100px 0; }

.circle-lefttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;  -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:100px 0 0 0; }
.circle-righttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;  -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; border-radius:0 100px 0 0; }
.circle-rightbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;  -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; border-radius:0 0 100px 0; }
.circle-leftbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;  -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; border-radius:0 0 0 100px; }

下面是適當的調整邊框寬度和圓角得到的效果：

左上小尾巴

右上小尾巴

右下小尾巴

左下小尾巴

/*適當的調整邊框寬度和圓角得到的效果*/
.tail-lefttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:100px 0 0 0;-webkit-border-radius:100px 0 0 0;border-radius:100px 0 0 0;width:100px;height:100px;}
.tail-righttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:0 100px 0 0;-webkit-border-radius:0 100px 0 0;border-radius:0 100px 0 0;width:100px;height:100px;}
.tail-rightbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 100px 0;-webkit-border-radius:0 0 100px 0;border-radius:0 0 100px 0;width:100px;height:100px;;}
.tail-leftbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 100px;-webkit-border-radius:0 0 0 100px;border-radius:0 0 0 100px;width:100px;height:100px;}

當然可以通過上面延伸畫出更多的效果比如：提示泡

先看效果：

提示泡

.pop{width:200px;height:100px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background:#669;margin-top:20px;position:relative}
.pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;}

上面是css實現代碼，基本原理又多了一項，就是利用了:after偽類，小尾巴上面已經介紹過了，這裡又利用了一個css3.0的屬性transform:rotate旋轉了一個角度，

同時還實現了另外的一個圖形--圓角矩形，這是最基本radius的用法，沒什麼可講的。當然這裡也可以延伸出另一個偽類:before畫出第二個小尾巴，當然也不僅限於

小尾巴，上面的圓角矩形也可以換成橢圓。

下面給出實現代碼：

.oval-pop{width: 200px; height: 100px; background: #669; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;
 margin-bottom:50px;position:relative}
.oval-pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;left:20px}

效果如下：

橢圓提示泡

同時，也給出了橢圓的實現代碼。 其中 border-radius: 100px / 50px; 中有一個“/” 這個符號是很少出現在css樣式中的。

因為，圓角有水平方向也有垂直方向，所以"/"前面代表水平方向，後面代表垂直方向。

於是我們又多了一個屬性，又多了一個發揮的方向。突然間我們發現css畫圖形其實就是對屬性的組合創造。多試幾次，相信每個人都很好的掌握這個技能！

下面再看一個屬性，其實是對上面講過的屬性的一個擴展。

可以說是畫圓的擴展也可以說是對圓角矩形的擴展---膠囊形：

膠囊

膠囊

半個膠囊

傾斜半個膠囊

傾斜半個膠囊

傾斜半個膠囊

 下面是實現代碼，基本屬性上面我們都利用過，只是稍做調整：

.capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:200px;height:70px;background:#669;}
.v-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:80px;height:200px;background:#669}
.up-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;}
.r45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-left:20px;}
.l45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);margin-left:20px;}
.lr45-capsule{width:160px;height:130px;position:relative}
.lr45-capsule:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.lr45-capsule:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:160px;top:00px;}

細觀察一下最後兩個圖形如果合在一起好像能組成一個心形，其實就是一個心形：

心形

.heart{width:160px;height:200px;position:relative}
.heart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.heart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}

 上面講的只是對css畫圖形的初步認識，基本上所有的實現都是對邊框的角度的調整及組合。下節將會畫些復雜的圖形。