如何使用纯css制作扇形图,合并起来形成饼图
发布网友
发布时间：2022-04-26 20:25
共2个回答
热心网友
时间：2022-04-06 12:08
使用纯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;
}
效果：
热心网友
时间：2022-04-06 13:26
添加Div，DIV设定在页面中的位置。本示例展示一个从0度顺时针转超过180度的，一个从0度逆时针转超过180度的。由于未超过180度的，可以单纯转就可以实现，暂不介绍。
给顺时针添加样式，如下图。实现原理：使用clip属性截图最大可以截取180度的半圆形，超过180度就需要用补全的方式了。
4
给逆时针添加样式，如下图。实现原理：跟顺时针相同，稍复杂一步。需要先转出360去掉逆时针的角度。比如：225度，需要先转360-225=135度，结合起来才能实现。
5
全部实现后，如下图。（上下由于工具自动截取，原图是补全的）
6
全部的DIV要使用绝对定位position:absolute,图片的大小和截取的半径要相同。
