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

Question

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

具体的效果是什么？

Link To Website

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

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

检查一下 - DEMO。

查看此Border Radius Generator（用于制作圆圈）。

更新

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

如果百分比在50%及以上，我们必须隐藏第二个slave，并减少或增加第一个slave的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);