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

html-css031

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

使用纯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

}

效果：

方法一：border

我们知道利用border+宽高：0 可以实现如下效果 （假设圆的半径是100px）

如果要实现扇形在此基础上圆角一下即可，同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果

方法二：矩形+半圆相切

基本思路是：左边的半圆旋转与右边的矩形相切。

至于细节： 

1.半圆的由来：可以rect裁剪只显示圆的左边部分 

2.同理，矩形也通过rect裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

然后剩下的完善同样三个标签旋转一定角度。