使用CSS创建空心球饼和任何半径？ [英] Create hollow sphere with pie having any radius using CSS?

问题描述

我只是想做一个空心的球体与另一个彩色的饼，可以有任何半径。搜索很多，但发现一些 border-radius 属性，我知道已经，但 clip：rect（top，right，bottom，left）。我如何使用它？我搜索了教程，但教程是有点乱和不完整。

究竟是什么效果？

a href =http://www.awwwards.com =nofollow>链接到网站

查看四色空心球体的外观

并且stackoverflow也不包含这样的任何问题。

解决方案

要创建饼图效果，您必须有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）; 
} 
  

CHECK IT OUT - （用于创建圈子）。

strong> UPDATE

我发现了一种减少和增加的方法，但它需要2个从属，同样的CSS属性。

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

剪辑：rect（0px，50px，20px，0px）;

clip：rect（0px，50px，100px，0px）;

现在，当圆圈的一半已填满时，我们必须 show 第二个从机。要减少它并增加它，我们应该更改 top 。

（60px，100px，100px，0px）;

剪辑：rect（20px，100px，100px，0px）;

p>

查看 - DEMO

  clip：rect（top，right，bottom，left）; 
  

I am just trying to make a hollow sphere with another colored pie which can have any radius. Searched alot but find some things border-radius property which i know already but clip: rect(top, right, bottom, left). How can i use that? I searched for tutorials for it but tutorials are little messy and incomplete.

What Exactly effect is?

Link To Website

See How that four colored hollow sphere look like.

And stackoverflow also does not consists of any question like this.

解决方案

To Create that Pie Effect, you must have 2 divs.

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

The First div is the original sphere, it can be done purely with 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;

The Second div will have the lighter color, again purely with 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;

Then we use clip:rect(0px,50px,50px,0px);.

Now we must only fix the positioning, using postion:relative; and 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);
}

CHECK IT OUT - DEMO.

Check this Border Radius Generator (used to make circles).

UPDATE

I found a way to decrease and increase but it requires 2 slaves, Same CSS properties.

If the percentage is 50% and above, we must hide the second slave, and decrease or increase the bottom of the first slave.

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

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

Now when half of the circle is filled, we must show the second slave. To decrease it and increase it, we should change the top.

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

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

Check it out - DEMO

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

这篇关于使用CSS创建空心球饼和任何半径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！