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