Create hollow sphere with pie having any radius using CSS?

Question

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.

Answer 1

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