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?

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>

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

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>

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>

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>

Answer 6

.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>

Answer 7

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.

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>