web-dev-qa-db-fra.com

Comment faire un cercle à l'intérieur d'un autre en utilisant CSS

J'essaie de créer un cercle à l'intérieur d'un autre cercle à l'aide de CSS, mais je ne parviens pas à le centrer complètement. Je suis proche, mais toujours pas 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;
}

En outre, voici un violon: http://jsfiddle.net/972SF/

csscss3
14
scapegoat17

Ta da! 

Expliqué dans les commentaires CSS:

 #outer-circle {
   background: #385a94;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   /* 
    Child elements with absolute positioning will be 
    positioned relative to this div 
   */
 }
 #inner-circle {
   position: absolute;
   background: #a9aaab;
   border-radius: 50%;
   height: 300px;
   width: 300px;
   /*
    Put top Edge and left Edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -150px 0px 0px -150px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }
<div id="outer-circle">
  <div id="inner-circle">

  </div>
</div>

25
misterManSam

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

Vous pouvez tout faire avec un élément et une boîte-ombre.

JSFiddle Demo.

CSS

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:300px;
    width:300px;
    position: relative;
    box-shadow: 0 0 0 100px black;
    margin:100px;
}
18
Paulie_D

Utilisez position: relative sur le cercle extérieur, position:absolute sur le cercle intérieur et définissez tous les décalages sur la même valeur. Laissez le calcul automatique de hauteur et de largeur 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*/
}
3
Zeta

Il semble que top soit la seule chose à modifier -> 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;
}
2
davidkonrad

Utilisez simplement box-shadow pour obtenir l’effet souhaité:

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

Le html est réduit à:

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

c'est simple, facile et veille à ce que vos cercles soient toujours parfaitement positionnés les uns à côté des autres. 

Vous pouvez changer la taille du cercle en changeant la 4ème propriété (100px) de box-shadow à votre guise. 

2
agconti

jetez un oeil à ceci violon

qui calcule automatiquement le centrage

#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;
}
1
Syd

Voici un exemple de cercle avec une bordure extérieure.

HTML:

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

Modes:

    #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

1
Lord Nighton

Résolu cela en utilisant la propriété de transformation CSS:

Vous pouvez vous référer à ce JS fiddle link pour la sortie ci-dessous: http://jsfiddle.net/suprabhasupi/74b1ptne/ Circle inside circle 

div {
  border-radius: 50%;
  /* border: 1px solid red; */
}

.circle1 {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
}

.circle2 {
  transform: translate(25%, 25%);
  width: 200px;
  height: 200px;
  background-color: green;
}

.circle3 {
   transform: translate(48%, 46%);
  width: 100px;
  height: 100px;
  background-color: blue;
}
<div class="circle1">
  <div class="circle2">
    <div class="circle3">
    
    </div>
  </div>
</div>

1
Suprabha

Voyez comment j'ai positionné les divs, Juste le rayon frontière 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&EACUTE;MO

0
defau1t

essayez de donner à innercircle un top:50% et à margin-top: une valeur indicative à partir de la moitié de la hauteur du cercle innercent.

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

0
Maartje

Essayer, 

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

Voici votre mise à jour JSFIDDLE

0
Santhosh Kumar

Résolu! Exactement comme vous le souhaitez:

DEMO: 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%;
}
0
Aniruddha Pondhe