Solución:
¡Ta da!
Explicado en los comentarios de 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>
No necesitas elementos adicionales en CSS3
Puede hacerlo todo con un elemento y una sombra de caja.
Demostración de JSFiddle.
CSS
#outer-circle {
background: #385a94;
border-radius: 50%;
height:300px;
width:300px;
position: relative;
box-shadow: 0 0 0 100px black;
margin:100px;
}
Usar position: relative
en el círculo exterior, position:absolute
en el círculo interior y establezca todos los desplazamientos en el mismo valor. Deje que el cálculo automático de altura y ancho maneje el resto (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*/
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)