纯css饼图,使用css3画饼图

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%;

background: linear-gradient(-36deg, #5454E3 42%, transparent 42%) 100% 0;

background-repeat: no-repeat;

background-size: 50% 50%;

border-radius: 50%;

}

多次对background设置linear-gradient值，已看晕。。。

那些角度和百分比究竟如何设置？

那块饼又是怎么被分出去的？

请看以下分析：

以背景中第一条liear-gradient设