纯css饼图,使用css3画饼图

最新推荐文章于 2024-03-05 14:41:29 发布

搬书小二

最新推荐文章于 2024-03-05 14:41:29 发布

阅读量1.1k

点赞数

文章标签：纯css饼图

这篇博客详细介绍了如何利用CSS3的linear-gradient属性来创建纯色饼图，包括角度和百分比的设置方法，以及如何计算不同颜色块的面积比例。通过实例展示了将圆分为10等分和6等分的饼图，并解释了如何调整元素位置以实现饼图的切分效果。

摘要由CSDN通过智能技术生成

CSS3 Gradient介绍参考地址：

效果图：

html:

css:

.colorWheel {

position: relative;

width: 16em;

height: 16em;

background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent 75.48% ),linear-gradient(-36deg, #479bf6 42%, transparent 42%) 100% 0,linear-gradient(-72deg, yellow 75.48%, transparent 75.48%) 100% 0,linear-gradient(-36deg, transparent 58%, #643 58%) 0 100%,linear-gradient(-72deg, transparent 24.52%, #8a1 24.52%) 0 100%,linear-gradient(36deg, transparent 58%, #90a 42%) 100% 100%,linear-gradient(72deg,transparent 24.52%, #099 24.52%) 100% 100%,#43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 0;

background-repeat: no-repeat;

background-size: 50% 50%;

border:1px solid #ccc;

border-radius: 50%;

margin: 30px;

}

.piece{

position: absolute;

left: 8%;

top: -2.6%;

width: 100%;

height: 100%;