Html 在css中创建饼图的一部分

如何创建饼图的一部分

例如，我们可以使用

边界半径创建25%：0 0 20px 0和100%使用
边界半径：20px

我试图在css中创建一个不同颜色的圆圈来解释不同的部分。在中间，我会在白色圆圈中放置一个$标志，所以只有边界会被着色。< /P>
不幸的是，我从来没有玩过圈子，也没有多少人在网上谈论这个话题

最终，我将动画它，所以它将是所有白色的，慢慢地从0%开始，它将开始显示所有类别，但这不是现在的重点

欢迎提出任何建议

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

创建具有边界半径的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;
}

结果



更新

如果你使用的是.Net，HTML5画布是一个选项吗？我可以帮你。谢谢@Sico的链接，我会看一下的！：）@Reddy No.Net为我服务，但非常感谢您的报价！：）检查我的答案，看看是否适合你谢谢你@Jorge，老实说，我更喜欢CSS而不是Canvas，但我会看看是否有可能让其他%比如15%作为例子。Canvas看起来更适合这种操作：（（向上投票）我根据你所做的在互联网上查找，我发现：一旦你知道如何制作，就有点容易了；）