一、三角形
1、CSS画等腰三角形
2、画直角三角形：
二、画圆形
注意：border-radius是width/height的一半（50%）。
画半圆：
半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。
画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。
三、画椭圆
斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
四、平行四边形
margin-left是为了使得平行四边形可以全部在浏览器中显示出来
五、梯形
高度为0。有宽度没高度。
六、五边形、六边形
html部分：<pre class="brush:htmltoolbar: trueauto-links: false"><div class="div1"> <div class="right-div2"> <div class="right-div3"></div></div><div class="left-div2"> <div class="left-div3"></div></div></div><div class="div4"><span>0</span>%</div></pre>
最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层
css代码：
<pre class="brush:csstoolbar: trueauto-links: false">.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200pxheight:200pxborder-radius:50%} .div1 { background:#cccposition:relative} .right-div2, .right-div3, .left-div2, .left-div3 { position:absoluteleft:0top:0} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px)} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto)} .right-div3 { background:#f00transform:rotate(-180deg)} .left-div3 { background:#f00transform:rotate(-180deg)} .div4 { position:absolutetop:25pxleft:25pxwidth:150pxheight:150pxline-height:150pxtext-align:centerborder-radius:50%background:#fff}</pre>
js代码：
<pre class="brush:jstoolbar: trueauto-links: false">$(function(){ var a = 0 var b = 0 var timer = setInterval(function(){ a++ if(a<=50){ //-180deg是0%，转换一下 b = a*3.6-180$('.right-div3').css('transform','rotate(' + b + 'deg)') }else if(a>50&&a<=100){ //超过50%，需要修改左边的,右边0deg是50% $('.right-div3').css('transform','rotate(0)') //左边0deg是100%，转换一下 b = a*3.6-360$('.left-div3').css('transform','rotate(' + b + 'deg)') }else{ clearInterval(timer)return }$('.div4 span').html(a) },200)})</pre>
css3的圆角样式border-radius就可以做到了，
圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，
注意的是，如果你是直接用Img标签的话，那你的Img
宽高要一样，就是说要是正方形，
如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%然后再background图片就可以了。
