Responsive CSS Cercles

Plus Court Code

Cette solution réduit la taille du code, mais conserve la fonctionnalité en place. J'ai gardé l'original .x#, l'élimination de la .x0, .x3, et .x6 qui n'étaient pas nécessaires. Ainsi, dans une dernière solution, vous auriez probablement renuméroter (mais je voulais vous faire voir ce qui a été éliminée).

L'un de vos morceaux de "découpage" du cercle qui nécessitent un autre top ou left réglage aurez besoin d'avoir un sélecteur qui respecte ou dépasse les .x2 > div sélecteur de remplacer, c'est pourquoi j'ai .x2 > .x7 etc. pour certains de mes sélecteurs.

(Comme indiqué dans les commentaires ci-dessous, Chrome a un bug questions avec la technique originale de l'OP avait publié à l'époque de la prime de départ. Ce n'est pas la solution, donc la suite dans un autre navigateur.)

Voici la modification de violon.

HTML

<div class="x1">
        <div class="x2">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x7">
                    dude
                </div>
                <div class="x8">
                    dude
                </div>
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>

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: Basée sur les commentaires, il semble que l'OP souhaité quelque chose de plus comme le contrôle de ce violon offre (non-fonctionnelle en Chrome; l'OP n'a pas au moment de cette édition a répondu pour moi de savoir si c'est le type de fonctionnalité désirée ou non).

Je sais que cette solution diffère un peu de ce qui a été proposé ici, mais j'ai toujours pensé qu'il serait intéressant de le mettre en place.

J'ai utilisé une image comme un masque pour créer le cercle, et profita du fait que, lorsque le remplissage est indiquée sous forme de pourcentage, il est calculé en fonction de la largeur de son élément parent, plutôt que de la hauteur. Cela m'a permis de créer un carré parfait.

Démonstration de cercles proportionnellement redimensionnement ici

Code HTML

<div class="container">
<img class="circle" src="circleImage.png">
</div>

Code CSS

.container {
position: relative;
float: left;
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #bbb;
}
.circle { 
position: absolute;
width: 100%;
left: 0;
top: 0;
height: auto;
z-index: 1;
}
@media (max-width: 320px) {
.container { width: 100%; padding-bottom: 100%; }
}
@media (min-width: 321px) and (max-width: 800px) {
.container { width: 50%; padding-bottom: 50%; }
}
@media (min-width: 801px) {
.container { width: 25%; padding-bottom: 25%; }
}

Démonstration des cercles au-dessus de sous-divisé en sections, par votre question ici