Creating 4 circles inside each other using css

Question

I'm trying to get 4 circles within in each other (that don't have a background colour, just a border colour) with text inside the last one using CSS.

Example: https://i.sstatic.net/SCYBw.jpg

Any idea on how this can be done?

Answer 1

Messing around with this as I procrastinated.

Vertically responsive, basic hover effect.

html, body {
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: gray;
}
div {
  display: flex;
  flex-grow: 1;
  background-color: hsla(0, 0%, 0%, 0.0);
  border-style: solid;
  border-color: white;
  border-width: 5px;
  border-radius: 100%;
  padding: 5px;
  overflow: hidden;
  transition: all 0.1s linear;
  box-sizing: border-box;
}
.ring1 {
  height: 100vh;
  width: calc(100vh);
}
.ring2 {
  border-color: royalblue;
}
.ring4 {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 28px;
  font-variant: small-caps;
  font-weight: bold;
  color: royalblue;
  background-color: salmon;
}
.ring1:hover, .ring1:hover div {
  padding: 3px;
  font-size: 32px;
  border-width: 3px;
}

<div class="ring1">
  <div class="ring2">
    <div class="ring3">
      <div class="ring4">
        Breathe Out
      </div>
    </div>
  </div>
</div>

fiddle

https://jsfiddle.net/Hastig/9v4mLdep/

Answer 2

It's a styling, so don't mess with inner HTML code. CSS Gradients can do this well. it's even animatable

	.container {
		display: inline-block;
		height: 12em;
		width: 12em;
		padding: 4em;
		text-align: center;
		background: radial-gradient(circle closest-side, 
			hsla(  0, 80%, 80%, 0) 0%, 
			
			hsla(  0, 80%, 80%, 0) 78%, 
			hsla(  0, 80%, 80%, 1) 79%, 
			hsla(  0, 80%, 80%, 1) 82%, 
			hsla(  0, 80%, 80%, 0) 83%,
			
			hsla(100, 80%, 80%, 0) 87%,
			hsla(100, 80%, 80%, 1) 88%,
			hsla(100, 80%, 80%, 0) 89%,
			
			hsla(200, 80%, 80%, 0) 92%,
			hsla(200, 80%, 80%, 1) 93%,
			hsla(200, 80%, 80%, 0) 94%,
			
			hsla(300, 80%, 80%, 0) 97%,
			hsla(300, 80%, 80%, 1) 98%,
			hsla(300, 80%, 80%, 0) 99%
		)
		;
	}

	<div class="container">
	My inner text is here
	</div>

Answer 3

Here's my version.
My logic was divided into 2 steps:

• Step One :
  The .circle-1 is set as relative to be the container of the child's div.
• Step Two
  The rest of the div's is set as absolute and has a smallest padding that their father, for their parent aways be bigger than the son.
  The align in x-axis is set by the left and right as 0 and margin as 0 auto.
  The align in y-axis is set by the top:50% and transform:translateY(-50%).

  div{
    position: absolute;
    border: 3px solid;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    left:0;
    right:0;
    top: 50%;
    transform: translateY(-50%);
    margin:0 auto;
  }
  .circle-1{
    top: 200px;
    padding: 40px;
    position: relative;
  }
  .circle-2{
    padding: 30px;
    border-color: blue;
  }
  .circle-3{
    padding: 20px;
  }
  .circle-4{
    padding: 10px;
  }

  <div class="circle-1">
    <div class="circle-2">
      <div class="circle-3">
        <div class="circle-4"></div>
      </div>
    </div>  
  </div>

Answer 4

Here you go. This should help you get started.

.circle {
  border-radius: 50%;
  background: transparent;
  border: 2px solid red;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c2 {
  width: 400px;
  height: 400px;
  border-color: blue;
}

.c3 {
  width: 300px;
  height: 300px;
  border-color: yellow;
}

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

<div class="circles">

  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
        <div class="circle c4"></div>
      </div>
    </div>
  </div>

</div>

Answer 5

Simply position all the circles on top of each other.

 #outer-circle {
   border: 1px solid red;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   text-align: center;
 }
 #inner-circle {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 480px;
   width: 480px;
   top: 50%;
   left: 50%;
   margin: -240px 0px 0px -240px;
 }
 #inner-circle2 {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 460px;
   width: 460px;
   top: 50%;
   left: 50%;
   margin: -230px 0px 0px -230px;
 }
 #inner-circle3 {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 440px;
   width: 440px;
   top: 50%;
   left: 50%;
   margin: -220px 0px 0px -220px;
 }
 #text {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }

<div id="outer-circle">
  <div id="inner-circle">
    <div id="inner-circle2">
      <div id="inner-circle3">
         <div id="text">Breathe out</div>
      </div>
    </div>
  </div>
</div>