gpt4 book ai didi

css - 使用 CSS 创建具有任何半径的饼图的空心球体?

转载 作者:行者123 更新时间:2023-11-28 09:19:45 25 4
gpt4 key购买 nike

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

具体效果是什么?

Link To Website

看看这四个彩色空心球体的样子。

stackoverflow 也不包含这样的问题。

最佳答案

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

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

第一个 div 是原始球体,它可以纯粹用 border-radius 来完成。

enter image description here

-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

enter image description here

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

enter image description here

现在我们只需要使用 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 .

enter image description here

检查这个Border Radius Generator (用于制作圆圈)。

更新

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

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

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

enter image description here

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

enter image description here

现在当圆的一半被填满时,我们必须显示第二个奴隶。要减少和增加它,我们应该更改 top

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

enter image description here

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

enter image description here

查看 - DEMO

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

关于css - 使用 CSS 创建具有任何半径的饼图的空心球体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14776661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com