Responsive CSS Circles

Question

Goal:

Responsive CSS circles that:

1. Scale with equal radius.
2. Radius can be calculated by percent.
3. Radius can be con

Answer 1

Shorter Code

This solution reduces your code size but keeps the functionality in place. I've kept the original .x#, eliminating the .x0, .x3, and .x6 that were not needed. So in a final solution, you would probably renumber (but I wanted you to see what was eliminated).

Any of your pieces "splitting" the circle that require a different top or left setting will need to have a selector that meets or exceeds the .x2 > div selector to override, hence why I have .x2 > .x7 etc. for some of my selectors.

(As noted in the comments below, Chrome has bug issues with the original technique the OP had posted at the time of the bounty starting. This does not solve those, so view the following in another browser.)

Here's the modified fiddle.

HTML

        

                
                

                    dude
                
                

                    dude
                
                

                    dude
                
                

                    dude
                
                
        
        

        

        

    

CSS

.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

/* BEG Content */
.x2 > div {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
}
.x4,.x5 {
    width:100%;
    height: 20%;
}
.x2 > .x7, .x2 > .x8 {
    width:50%;
    height: 60%;
    top: 20%;
}
.x4 {
    background-color:blue;
}
.x2 > .x5 {
    background-color:yellow;
    top: 80%;
}

.x7 {
    background-color:green;
}
.x2 > .x8 {
    background-color:orange;
    left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}

EDIT: Based on comments, it appears the OP desired something more like the control this fiddle offers (not functional in Chrome; the OP has not at the time of this edit replied for me to know if that is the type of functionality desired or not).