xGapOP

index.html

<div class="container">
  <div class="big">
    <div class="medium">
      <div class="small">
      </div>
    </div>
  </div>
</div>

style.css

.container {
  width: 16%;
}

.big {
  background-color: #68cdd9;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
}

.medium {
  background-color: #a0dbcc;
  float: left;
  width: 74%;
  margin-top: 13%;
  margin-left: 13%;
  padding-bottom: 14%;
  border-radius: 50%;
  z-index: 5;
}

.small {
  background-color: #00abc9;
  width: 60%;
  margin-top: 20%;
  margin-left: 20%;
  padding-bottom: 60%;
  border-radius: 50%;
  z-index: 10;
}

xGapOP.markdown

xGapOP

A Pen by Jessamyn Smith on CodePen.

License.