Concentric circles with CSS

Question

Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS?

Jaf

voted to open as it is very general/useful and objective question – Sibylle

Answer 1

You can make 3 concentric circles with :

• one element
• border-radius:50%; to make the shape round
• padding and background-clip:content-box; for the white gap between the red and blue circles
• border for the outer blue circle

div{
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:#CE1126;
    background-clip:content-box;
    padding:40px;
    border:40px solid #00247D;
}

<div></div>

You can also use the approach described in Overlapping circles in CSS with 1 div with multiple box-shadows.

Note: as Harry pointed out inset box-shadows would be better (no need for margins and enables click/hover all over the shape)

div {
  background-color: #CE1126;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 40px #00247D, inset 0 0 0 80px #fff;
}

<div></div>

You can also use SVG to make the concentric circles. Here is an example using the circle element :

<svg viewBox="0 0 10 10" width="30%">
  <circle cx="5" cy="5" r="4" stroke-width="1.5" stroke="#00247D" fill="#fff"/>
  <circle cx="5" cy="5" r="2" fill="#CE1126"/>
</svg>

Colicweed

your solution is good but we can acheive this with ::before or ::after as well, If you are comfortable I can edit the code for your solution. you can find the jsfiddle a jsfiddle.net/zakirshaik/hu6jdenm/17 – Madrigal

@Madrigal I see you already added an aswer with that approach so no need to edit it into this question. – Colicweed

I really like the inset borders method, but with some colors there is an ugly halo in chrome. In this case the blue is dark enough to mask the red halo, but I experimented with other colors and saw a halo. – Cretonne

@LouiseEggleton can you plesase share a fiddle or other with an example showing that halo? – Colicweed

Example with halo jsfiddle.net/womvgbzf All I did was change the colors. Issue has to do with using border-radius and box-shadow – Cretonne

@LouiseEggleton Ok I see. I have made several tests and can't find a suitable workaround. This definetly looks like a bug (I see it in Firefox 67.0b10 also). – Colicweed

I still prefer the double inset box shadow technique when it doesn't produce this bug. I am using it with transparency for a nice monochromatic look jsfiddle.net/louiseeggleton/aub576dw/2 – Cretonne

@LouiseEggleton I see, very nice. I can't see the bug in your example either. – Colicweed

Answer 2

That's pretty a straightforward task. Create 3 divs, each having width == height, but they all have different sizes. Give them border-radius: 50%;, color them, then use position: absolute & relative; to center them. Can maybe use a flexbox too. But this is just a sketch which took 3 mins to build.

http://codepen.io/knitevision1/pen/NPMWwo

HTML

<div class="blue">
  <div class="white">
    <div class="red"></div>
  </div>
</div>

CSS

div {
  border-radius: 50%;
}

.blue {
  height: 200px;
  width: 200px;
  background-color: rgb(0, 36, 125);
  position: relative;
}

.white {
  height: 130px;
  width: 130px;
  background-color: #fff;
    position: absolute;
  top: 35px;
  left: 35px;
}

.red {
  height: 70px;
  width: 70px;
  background-color: rgb(206, 17, 38);
  position: absolute;
  top: 30px;
  left: 30px;
}

Woodberry

Answer 3

Most of the solutions are good, But we can acheive this using :: pseudo-elements as well. Here container is the simple class just to wrap, The three cirlces are generated using only one div and pseudo-elements ::after and ::before.
With the single selectors we increase the concentric circles by adding padding, background-clip.

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;

}

.circle::after{
  content: '';
  background-color: yellow;
  width: 200px;
  height: 200px;
  position:absolute;
  z-index: -1;
  border-radius:50%;
  top: -50px;
  left:-50px;

}

.circle::before{
  content: '';
  background-color: pink;
  width: 300px;
  height: 300px;
  position:absolute;
  z-index: -1;
  border-radius:50%;
  top: -100px;
  left:-100px;

}

<div class="container">
<div class="circle">

</div>
</div>

Madrigal

Answer 4

Here is a simple approach to create three concentric circles using HTML/CSS. You can add as much circles as you want following the same logic.

.circle
{
  border-radius:50%;
}
.inner
{
  background-color:#666;
  height:32px;
  width:32px;
  margin:16px;
  display: inline-block;
}
.middle
{
  background-color:#888;
  height:64px;
  width:64px;
  margin:32px;
  display: inline-block;
 
}
.outer
{
  background-color:#aaa;
  height:128px;
  width:128px;
  margin-top:64px;
  display: inline-block;
}

<div class="outer circle">
	<div class="middle circle">
		<div class="inner circle"></div>
	</div>
</div>

Listing

Answer 5

And this is another way that uses box-shadow and border properties

.circle
{
  height:70px;
  width:70px;
  background-color:red;
  border:24px solid white;
  box-shadow: 0px 0px 0px 24px blue;
  border-radius:50%;
}

<div class="circle"></div>

Listing

Answer 6

I've got this question in an interview to cocenter three circles in middle of the page. I've did it in below way.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius: 50%;
}


.first {
  width: 300px;
  height: 300px;
}

.second {
  width: 200px;
  height: 200px;
}

.third {
  width: 100px;
  height: 100px;
}

<div class='first center'>
  <div class='second center'>
    <div class='third center'></div>
  </div>
</div>

For your question apart from positioning at center of page, you can position div with class 'first' as position - relative and also fill background color as per your need.

Epididymis

Answer 7

.circle
{
    border-radius : 50%;
    border : 1px solid black
}
.circle:first-of-type
{
    width : 150px;
    height : 150px;
    background-color : blue
}
.circle:first-of-type > .circle
{
    width : 100px;
    height : 100px
}
.circle .circle .circle
{
    width : 50px;
    height : 50px;
    background-color : red
}

Now the html;

<div class="circle">
    <div class="circle">
         <div class="circle"></div>
    </div>
</div>

Ho

Can you add some explenation to your answer? Only showing code can be confusing for some people. – Diplomat

Yes why not? Actually I thought the code is pretty self explanatory. Anyway, I am making the divs one inside another and assigned them a class circle where I added border-radius property 50%. Now using css sudo class first-of-type I added some width and height in the outer most div which is the biggest one and added background-color blue. Now the medium div is selected by immediate child selector but didn't add any background color; assuming that the default background color is white. And finally selected the inner most div and added red background color. – Ho

Answer 8

<!DOCTYPE html>
<html>
<body>
<script>
function round(x) {

text +=  '<circle cx="1000" cy="1000" r="'+ x +'"  stroke="black"stroke-width="4" fill="white" />'

}
</script>


<p id="demo"></p>
<script>
let text='<svg width="10000" height="10000">';
for( let x = 1000; x >0;x -= 50){
round(x);
}

text += '</svg>';

alert(text);
document. getElementById("demo").innerHTML=text

</script>

</body>
</html>

Iceman

Care to explain the answer. – Mikelmikell