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绘制的图形更轻巧，能够给移动端客户带来更好的体验。