Création de cercles concentriques en CSS

Question

J'essaie de créer un groupe de cercles concentriques en utilisant simplement CSS. Voici mon CSS:

.inner-circle{ 
height: inherit; 
width: inherit; 
background: #FFF; 
border: 1px solid #1a1a1a; 
border-radius: 50%; 
padding: 5px; 
margin: 1%; 

}

Ma tentative à ce jour est ici: http://jsfiddle.net/4yL2m/

Cependant, comme vous pouvez le voir dans le lien, je ne suis en mesure de créer des ellipses en fonction de la largeur et hauteur de la zone de la toile. Quelqu'un peut-il suggérer comment dessiner des cercles concentriques parfaits en imbriquant le même div en lui-même?

Answer 1

Je ne vois aucun moyen de spécifier les dimensions exactes (avec la même largeur/hauteur) pour le cercle le plus à l'extérieur. Vous pouvez lui donner sa propre classe

<div class="inner-two container"> 
.container { 
    width: 100px; 
    height: 100px; 
    margin: 1%; 
} 

Les cercles intérieurs seront concentriques avec des bordures/rembourrage si elles sont mises à box-sizing: border-box depuis la frontière/rembourrage sera inclus dans les dimensions. margin est pas inclus dans ce et est donc indésirable. Vous devez également spécifier height: 100%.

http://jsfiddle.net/4yL2m/8/

Notez que la div contenant ne pas aussi ont d'être l'un des cercles divs; il suffit de peut être.

Notez que pour l'utiliser pour Firefox, vous devez définir -moz-box-sizing: border-box; ainsi que boxing-sizing: border-box;.

Answer 2

Fondamentalement, vous devez obtenir le ratio d'aspect fixé à 1: 1. Apparemment, il existe un attribut CSS aspect-ratio reconnu par les navigateurs Webkit, mais il ne fonctionnera pas sur plusieurs plates-formes. Voir this question pour plus de détails, y compris certaines solutions de contournement cross-navigateur.

Answer 3

Cela pourrait vous rapprocher;

.inner-two{ 
height: 0px; 
width: 50%; 
background: #FFF; 
    border: 1px solid #1a1a1a; 
border-radius: 50%; 
padding-bottom: 50%; 
    margin:25%; 
} 

Answer 4

Il suffit d'ajouter:

display: table-cell; 
text-align: center; 
vertical-align: middle;