Creating 4 circles inside each other using css - html

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: http://imgur.com/a/5vUKI
Any idea on how this can be done?

Answer 1

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

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>

Answer 4

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 5

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/