在css中创建饼图的一部分

Question

如何创建饼图的一部分？

例如，我们可以使用border-radius: 0 0 20px 0;创建25％，使用border-radius: 20px;创建100％。

我正在尝试在css中创建一个不同颜色的圆圈来解释不同的部分。在中间，我会在一个白色圆圈中加上一个$符号，这样只有边框会被着色。

不幸的是，我从来没有玩过圈子，也没有多少人在互联网上谈论这个问题。

最终我会为它设置动画，使其全部为白色，从0％开始慢慢显示所有类别，但现在不是重点。

欢迎任何建议。

由于

Answer 1

好的，这个解决方案怎么样

创建一个边界为半径的Div，夸大为圆圈

div{
    width:400px;
    height:400px;
    border-radius: 328px;
}

然后在渐变

上创建所选部件

.percent_50  {
    background-image : -webkit-gradient(radial, 200 200, 0, 200 0, 200,
        from(red), to(red));
    background-image : -moz-gradient(radial, 200 200, 0, 200 0, 200,
        from(red), to(red));
    background-image : -ms-gradient(radial, 200 200, 0, 200 0, 200,
        from(red), to(red));
    border:1px solid black;
}
.percent_25  {
    background-image : -webkit-gradient(radial, 200 200, 0, 0 0, 200,
        from(red), to(red));
    background-image : -moz-gradient(radial, 200 200, 0, 0 0, 200,
        from(red), to(red));
    background-image : -ms-gradient(radial, 200 200, 0, 0 0, 200,
        from(red), to(red));
    border:1px solid black;
}

结果

http://jsfiddle.net/justelnegro/wdMYa/

<强>更新

http://jsfiddle.net/justelnegro/wdMYa/1/＆lt; - 较小