使用CSS创建具有任意半径饼图的空心球体？

我只是想用另一个彩色的馅饼做一个空心的球体，它可以有任何半径。搜索了很多，但找到了一些东西

边界半径

属性，我已经知道了，但是

clip:rect（上、右、下、左）

。我怎么用这个？我为它搜索了教程，但教程有点凌乱和不完整

确切的效果是什么

看看那个四色空心球是什么样子

---

stackoverflow也没有这样的问题。

要创建饼图效果，必须有2个div

<div id="parent">
    <div id="master">
    </div>
    <div id="slave">
    </div>
</div>

第二个div将具有较浅的颜色，同样纯粹使用

边界半径

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
width:70px;
height:70px;
border-style:solid;
border-width:10px;
border-color:#573;

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
width:70px;
height:70px;
border-style:solid;
border-width:10px;
border-color:#99FF33;

然后我们使用

clip:rect（0px，50px，50px，0px）


现在我们只需使用
position:relative来确定定位和
位置：绝对

CSS

#parent
{
    position:relative;
}
#master
{
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    width:70px;
    height:70px;
    border-style:solid;
    border-width:10px;
    border-color:#573;
}
#slave
{
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    width:70px;
    height:70px;
    border-style:solid;
    border-width:10px;
    border-color:#99FF33;
    position:absolute;
    top:0px;
    left:0px;
    clip:rect(0px,50px,50px,0px);
}

查看-


选中此项（用于制作圆）

更新

我找到了一种减少和增加的方法，但它需要两个从属，相同的CSS属性

如果百分比为50%及以上，我们必须隐藏第二个从机，并减少或增加第一个从机的
底部

clip:rect（0px，50px，20px，0px）


clip:rect（0px，50px，100px，0px）


现在，当圆的一半被填满时，我们必须
显示第二个从属对象。要减少和增加它，我们应该更改
顶部

clip:rect（60px，100px，100px，0px）


clip:rect（20px，100px，100px，0px）


看看-

你想创建像那些黄-红-蓝的圆圈一样的东西吗？不，伙计，我想是那个圆圈的复制品，还有一个解释做了什么和没有做什么的教程；）我刚从你的问题
剪辑
中学到了一个新的属性，我已经知道了需要做什么，那么我为什么要回答它。这是什么“我为什么要回答它”？你能解释一下吗。@AliBassam我能做的只是保证你+25声誉，如果它满足要求。如果我想增加打火机div怎么办？如何让那个打火机div增加但不改变它在网络中的位置？它不会改变它的位置，你唯一需要做的就是改变
顶部，右侧，底部，左
在
剪辑中
所以你增加或减少它。好吧，这是唯一让我困惑的事情。你可以看到它是如何在网页上动画的。当我试着去做的时候？发生了什么？看：如果我也给出一个很好的答案，那么#slave div不会增加。谢谢你的努力！
clip:rect(top,right,bottom,left);