css繪製圖形

  第一次想用css繪製圖形是在做一個列表時，想用三角形作爲列表的圖標，後來發現，css可以繪製各種圖形，主要是利用border屬性。

一、三角形 
       根據不同的border設置可以繪製上三角，下三角，左三角，右三角等各種三角形，這裏介紹下三角。
       1.將元素大小設置爲0 。

#triangle-down
{
width: 0; 
height: 0;
}

       2.設置三個border，因爲爲下三角，所以border-bottom就爲0，設置其他三邊就好，作爲底邊border的寬度爲另外兩邊的兩倍，爲了明顯的看出效果，我將三邊的顏色區分開了。

#triangle-down
{
border-left: 50px solid yellow; 

border-right: 50px solid green; 

border-top: 100px solid red; 

}

       3.將左右border的顏色設置爲transparent。

      demo戳這裏：http://runjs.cn/code/5vw36ya3

二、圓形 
      圓形就很簡單，主要利用border-radius這個屬性。
     1.將元素的寬、高設置爲一樣，即元素爲一個正方形。

#circle { 
width: 100px; 
height: 100px; 
｝

     2.利用border-radius將正方形變爲圓形。

border-radius：50%；

    demo戳這裏：http://runjs.cn/code/ygk5gznz

三、對話框
       這個對話框其實是由兩個圖形組成的，一個左三角，一個圓角長方形，左三角是一個僞元素。
     1.繪製一個圓角長方形。

#talkbubble { 
width: 120px; 
height: 80px; 
border-radius: 10px; 
} 

 

    2.繪製一個左三角

    這裏是利用僞元素：before實現的，僞元素也可以像普通元素設置大小。

#talkbubble:before { 
content:""; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
} 

   3.將左三角定位到長方形的左中位置，形成對話框。

#talkbubble:before { 
position: absolute; 
right: 100%; 
top: 26px; 
} 

  

      demo戳這裏：http://runjs.cn/code/x489vcd7

      與圖片相比，css繪製的圖形更輕巧，能夠給移動端客戶帶來更好的體驗。