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

Question

我只是想用另一个可以有任何半径的彩色馅饼制作一个空心球体.搜索了很多,但找到了一些border-radius我已经知道的东西但是clip: rect(top, right, bottom, left).我该怎么用？我搜索了它的教程,但教程有点混乱和不完整.

究竟有什么影响？

链接到网站

请参见四色空心球看起来如何.

而stackoverflow也不包含任何这样的问题.

Answer 1

要创建该饼图效果,您必须有2个div.

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

第一个div是原始球体,它可以完全用border-radius.

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

第二个div将具有较浅的颜色,再次纯粹的颜色border-radius.

-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);.

现在我们必须只修复定位,使用postion:relative;和position:absolute;

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);
}

检查一下 - 演示.

检查此边界半径生成器(用于制作圆圈).

UPDATE

我找到了减少和增加的方法,但它需要2个从属,相同的CSS属性.

如果百分比是50%及以上,我们必须隐藏第二个从属,并减少或增加bottom第一个从属.

clip:rect(0px,50px,20px,0px);

clip:rect(0px,50px,100px,0px);

现在,当圆圈的一半被填满时,我们必须show是第二个奴隶.为了减少它并增加它,我们应该改变它top.

clip:rect(60px,100px,100px,0px);

clip:rect(20px,100px,100px,0px);

看看 - DEMO

clip:rect(top,right,bottom,left);