使用纯css制作扇形图，合并起来形成饼图：
应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图
html：<div id="circle">11</div>
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：<div id="fan">11</div>
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的svg+css3绘制，比js方便！下面是个简单的例子
<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "
<svg width="400" height="400">
<path d="M200,200 L200,20 A180,180 0 0,1 377,231 z" style="fill:#ff0000 fill-opacity: 1 stroke:black stroke-width: 1"/>
<path d="M200,200 L377,231 A180,180 0 0,1 138,369 z" style="fill:#00ff00 fill-opacity: 1 stroke:black stroke-width: 1"/>
<path d="M200,200 L138,369 A180,180 0 0,1 20,194 z" style="fill:#0000ff fill-opacity: 1 stroke:black stroke-width: 1"/>
<path d="M200,200 L20,194 A180,180 0 0,1 75,71 z" style="fill:#ff00ff fill-opacity: 1 stroke:black stroke-width: 1"/>
<path d="M200,200 L75,71 A180,180 0 0,1 200,20 z" style="fill:#ffff00 fill-opacity: 1 stroke:black stroke-width: 1"/>
</svg>
现在3D图形的编程是通过css3样式实现的。其实对于这样的一个问题的话，在我个人看来的话，是可以通过层叠样式表来实现这，一个样式的，因为我们都知道，现在在一些计算机编程里面分为，平面网页设计师，还有前端工程师以及后端开发工程师，这三个部分，其中在前端工程里面的话，就包括层叠样式表，因为这个也是非常基础的，就是对于一些元素增添一些所必要的一些样式，然后在网页中可以更好的去展现出来，所以说这是非常好的一个办法，而且这现在也是比较方便的一种办法，有可能是对一些别的专业的同学来说的话，听到这些名词，或许有些陌生，但是我说是对于前端这方面比较熟悉的一些同学来说的话，这样的一个问题，只要给他们说一下，他们就很自然的就会懂了，所以说我们现在计算机编程这方面，的话确实有很多方面的地方，因此，我觉得编程他也是一门语言，如果说是将这门语言学好的话，也可以给我们创造很多的一些企业服务，以及我们自己想要的一些东西，因此，前端去做更多各种各样的事情，包括现在前端这一个行业，有的人也说是前后端通吃啊，而且也是比较方便的一个语言，因此，可以建议大家去考虑一下学习前端，因为前端的一些魅力确实是非常好的，我自己也是比较喜欢的。所以，我们可以运用前端的一些知识我们可以做出来很多好看的网页，包括自己的一些3D图形，还有一些我们熟知的一些特殊的符号都是可以通过这个来实现的，因此我觉得这里面确实是有很多的奥秘等着我们来解开这个问题。
