CODEWITHSUNDEEP
css
Gautam Krishnan
Gautam Krishnan

Reputation: 722

Creating concentric circles in CSS

I am trying to create a bunch of concentric circles purely using CSS. Here's my CSS: 

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

}

My attempt so far is here: http://jsfiddle.net/4yL2m/

However, as you can see in the link, I am only able to create ellipses according to the width and height of the canvas area. Can anyone suggest how to draw perfect concentric circles by nesting the same div within itself?

Upvotes: 1

Views: 7022

Answers (5)

Kondal
Kondal

Reputation: 2970

Three concentric circles

Here I have drawn 3 circles using CSS. The middle circle is exactly centered between the outermost and innermost circle. In other words the

RADIUS OF THE MIDDLE CIRCLE = (OUTER CIRCLE RADIUS + INNER CIRCLE RADIUS) / 2.

Here each circles has been represented by a DIV.

HTML

<div class="parent">
        <div class="child1">
        &nbsp;
        </div>

        <div class="child2">
        &nbsp;
        </div>
  </div>

CSS

   <style>
     .parent {
            background-color:blue;
            width:400px; /* You can define it by % also */
            height:400px; /* You can define it by % also*/
            position:relative;
            border:1px solid black;
            border-radius: 50%;
       }
    .child1 {
            background-color:lime;
            top: 10%; left:10%; /* of the container */
            width:80%; /* of the outer-1 */
            height:80%; /* of the outer-1 */
            position: absolute;
            border:1px solid black;
            border-radius: 50%;
          }
    .child2 {
            background-color:yellow;
            top: 20%; left:20%; /* of the container */
            width:60%; /* of the inner-1 */
            height:60%; /* of the inner-1 */
            position: absolute;
            border:1px solid black;
            border-radius: 50%;
      }
  </style>

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191769

I can't see any way around specifying exact dimensions (with equal width/height) for the outermost circle. You can give it its own class

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

The inner circles will be concentric with borders/padding if they are set to box-sizing: border-box since the border/padding will be included in the dimensions. margin is not included in this and is thus undesirable. You also need to specify height: 100%.

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

Note that the containing div does not also have to be one of the circle divs; it just can be.

Note in order to use it for firefox you need to set -moz-box-sizing: border-box; as well as boxing-sizing: border-box;.

Upvotes: 6

AymericPM
AymericPM

Reputation: 1

Just add :

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

Upvotes: 0

Steve0
Steve0

Reputation: 2253

This might get you closer;

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

Upvotes: 0

user1618143
user1618143

Reputation: 1748

Basically, you need to get the aspect ratio fixed at 1:1. Apparently there's an aspect-ratio CSS attribute that webkit browsers recognize, but it won't work cross-platform. See this question for more details, including some cross-browser workarounds.

Upvotes: 0

Related Questions