Create a hollow ball with a circle with any radius using CSS?
I am just trying to make a hollow ball with a different colored cake that can have any radius. Searched a lot but found some properties border-radius
that I already know but clip: rect(top, right, bottom, left)
. How can I use this? I've searched for tutorials for it, but tutorials are a bit messy and incomplete.
What is an effect?
See what the four colored hollow spheres look like.
And stackoverflow doesn't consist of such questions either.
source to share
To create this 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 only be made 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 a lighter color, clean with again 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 only need to fix the positioning using postion:relative;
andposition: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 Border Radius Generator (used to create circles).
UPDATE
I found a way to shrink and enlarge, but it requires 2 slaves, same CSS properties.
If the percentage is 50% or more, we have to hide the second slave and decrease or increase the bottom
first slave.
clip:rect(0px,50px,20px,0px);
clip:rect(0px,50px,100px,0px);
Now that half of the circle is full, we need a show
second subordinate. To make it smaller and larger, we must change top
.
clip:rect(60px,100px,100px,0px);
clip:rect(20px,100px,100px,0px);
Check it out - DEMO
clip:rect(top,right,bottom,left);
source to share