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>