htmlcssfrontendfigures

How to realize two collapsing circles in pure css3?

What i need to do is on image below:

enter image description here

I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?

Solution

  • This is a simpliest way to do it, may be you can improve it for your needs

    #main {
  width: 80px;
  border-radius: 50%;
  height: 80px;
  border: 3px solid blue;
}

#background {
  background: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

#small {
  background: grey;
  width: 30px;
  border-radius: 50%;
  height: 30px;
  border: 3px solid blue;
  margin-top: -30px;
  margin-left: 50px;
}
    <div id="main">
  <div id="background"></div>
</div>
<div id="small"></div>