Comment faire un cercle à l'intérieur d'un autre à l'aide de CSS

Je suis en train de faire un cercle à l'intérieur d'un autre cercle à l'aide de css, mais je rencontre un problème qui le rend totalement centré. Je suis proche, mais pas encore là. Des idées?

<div id="content">
    <h1>Test Circle</h1>
    <div id="outer-circle">
        <div id="inner-circle">
            <span id="inside-content"></span>
        </div>
    </div>
</div>

Voici mon CSS:

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 0px 0px 0px 100px;
}

Aussi, ici, est un violon:
http://jsfiddle.net/972SF/

supprimer la marge, ajouter left: 100px; top: 100px;.
Pourriez avoir besoin de jouer avec des z-index en outre, pour assurer le cercle intérieur se trouve sur le dessus 🙂
pas besoin de z-index.
Vrai, pas besoin lorsque les éléments sont imbriqués!

OriginalL'auteur scapegoat17 | 2014-03-14

css css3

18

Vous n'avez pas besoin d'éléments supplémentaires en CSS3

Vous pouvez tout faire avec un seul élément et un box-shadow.

JSFiddle Démo.

CSS
```
#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:300px;
    width:300px;
    position: relative;
    box-shadow: 0 0 0 100px black;
    margin:100px;
}
```
Mes pensées exactement +1.
cette réponse, c'est super épicé. Merci!

OriginalL'auteur Paulie_D

Utilisation position: relative sur le cercle extérieur, position:absolute sur le cercle, et de définir toutes les décalée par rapport à la même valeur. Laissez le calcul automatique de la hauteur et de la largeur de gérer le reste (JSFiddle):

#outer-circle {
    position:relative;
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle { 
    position:absolute;
    background: #a9aaab;
    border-radius: 50%;
    right: 100px;
    left: 100px;
    top: 100px;
    bottom: 100px;
    /* no margin, no width, they get automatically calculated*/
}

OriginalL'auteur Zeta

Semble que top est la seule chose que vous devez alter -> http://jsfiddle.net/972SF/12/

#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    top: 100px; /* <--- */
    margin: 0px 0px 0px 100px;
}

OriginalL'auteur davidkonrad

prendre un coup d'oeil à ce violon

qui calcule le centrage automatiquement

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
}
#inner-circle {
    display:inline-block;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
}

OriginalL'auteur Syd

Suffit d'utiliser box-shadow pour obtenir l'effet que vous voulez:

Démo dans un violon: http://jsfiddle.net/972SF/16/

Le html est réduite à:

<div id="content">
    <h1>Test Circle</h1>
    <div id="circle">
    </div>
</div>

Css:

#circle {
    margin: 10em auto;
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
    -webkit-box-shadow: 1px 1px 0px 100px black;
       -moz-box-shadow: 1px 1px 0px 100px black;
            box-shadow: 1px 1px 0px 100px black;
}

simple, facile, et permet de s'assurer que vos cercles sont toujours parfaitement placé à côté les uns des autres.

Vous pouvez modifier la taille du cercle en changeant la 4ème propriété ( 100px ) sur box-shadow pour ce que jamais vous le souhaitez.

OriginalL'auteur agconti

Voici un exemple d'un cercle avec bordure extérieure.

HTML:

<div id="inner-circle"></div>

Styles:

    #inner-circle {
    background: #385a94;
    border : 2px solid white;
    border-radius: 50%;
    height:30px;
    width:30px;
    position: relative;
    box-shadow: 0 0 0 1px #cfd1d1;
    }

Voir les résultats:
JSFiddle

OriginalL'auteur Lord Nighton

Essayer,

 #inner-circle {
    position: absolute;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 15% 0px 0px 100px;
}

Voici ur mise à Jour JSFIDDLE

OriginalL'auteur Santhosh Kumar

Voir Comment j'ai placé les Divs, Juste border-radius devrait faire le Travail

.outer{width:500px;height:500px;background:#f00;border-radius:50%;position:relative;top:0;left:100;}
.inner{width:250px;height:250px;background:#000;border-radius:50%;position:absolute;top:125;left:125;}



   <div class="outer">

      <div class="inner">


      </div>

    </div>

DÉMO

OriginalL'auteur defau1t

0

essayer de donner le innercircle un top:50% et que margin-top: une nagative valeur de la moitié de la hauteur de la innercircle.

http://jsfiddle.net/972SF/19/

OriginalL'auteur Maartje

RÉSOLU! Exactement comme vous le souhaitez:

DÉMO: http://jsfiddle.net/aniruddha153/RLWua/

HTML:

<div id="content">
   <div id="outer-circle">
      <div id="inner-circle">
      </div>
   </div>
</div>

CSS:

#content {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
}

#outer-circle {
   position: absolute;
   width: 50%;
   height: 50%;
   background-color: #000000;
   border-radius: 50%;
}

#inner-circle{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}

Essayez la solution ci-dessus.

OriginalL'auteur Aniruddha Pondhe

Vous devez vous connecter pour publier un commentaire.