如何使用纯css制作扇形图，合并起来形成饼图

使用纯css制作扇形图，合并起来形成饼图：

应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图

html：

css：

#circle{

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

}

效果：

4.同样我们对其中三个边框设置透明色即可得到扇形

html：

css:

#fan{

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color:red transparent transparent transparent;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

}

效果：

创建一个空白的html文件
添加Div，DIV设定在页面中的位置。本示例展示一个从0度顺时针转超过180度的，一个从0度逆时针转超过180度的。由于未超过180度的，可以单纯转就可以实现，暂不介绍。
给顺时针添加样式，如下图。实现原理：使用clip属性截图最大可以截取180度的半圆形，超过180度就需要用补全的方式了。
4
给逆时针添加样式，如下图。实现原理：跟顺时针相同，稍复杂一步。需要先转出360去掉逆时针的角度。比如：225度，需要先转360-225=135度，结合起来才能实现。
5
全部实现后，如下图。（上下由于工具自动截取，原图是补全的）
6
全部的DIV要使用绝对定位position:absolute,图片的大小和截取的半径要相同。