纯粹使用CSS制作饼图。由于js和flash制作成的图形，在某些导出PDF方式下，不能正常的导出，所以采用了纯CSS的方式。
工具/原料
1
CSS3知识
2
html知识
3
文本编辑器
方法/步骤
1
创建一个空白的html文件
2
添加Div，DIV设定在页面中的位置。本示例展示一个从0度顺时针转超过180度的，一个从0度逆时针转超过180度的。由于未超过180度的，可以单纯转就可以实现，暂不介绍。
3
给顺时针添加样式，如下图。实现原理：使用clip属性截图最大可以截取180度的半圆形，超过180度就需要用补全的方式了。
4
给逆时针添加样式，如下图。实现原理：跟顺时针相同，稍复杂一步。需要先转出360去掉逆时针的角度。比如：225度，需要先转360-225=135度，结合起来才能实现。
5
全部实现后，如下图。（上下由于工具自动截取，原图是补全的）
6
全部的DIV要使用绝对定位position:absolute,图片的大小和截取的半径要相同。
注意事项
1
clip: rect(0px,100px,200px,0px); 依次为：上、右、下、左
2
transform:rotate(180deg); 旋转多少度
3
!important; 提升本条代码的优先级
4
border-radius: 100px; 截图的半径，一般为正方形的一半
上一篇：Visio如何创建并调整扇形图
下一篇：草图大师如何绘制扇形？