堆叠两个相对定位在CSS中的圆圈

Question

任何人都可以帮助我实现基础的这种圈子：

我很无望。这些圈子必须有回应。

Answer 1

我正在发表一篇纯粹的CSS方法，就像你在评论中提到的那样。

1. 将.small-circle绝对定位到相对位置 .big-circle。
2. 让大圆圈的width和height为视口大小的单位。
3. 使用%代表较小圈子中的left和top值。
＆＃13;
＆＃13;
.big-circle {
  width: 50vh;
  height: 50vh;
  background: #70AAD4;
  border-radius: 50%;
  position: relative;
  /* For presentation */
  margin-left: 30px;
  margin-top: 30px;
}
.small-circle {
  background: #70aad4 none repeat scroll 0 0;
  border: 2px solid white;
  border-radius: 50%;
  height: 33%;
  left: -5%;
  position: absolute;
  top: -5%;
  width: 33%;
}
＆＃13;
<div class="big-circle">
  <div class="small-circle"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

＆＃13;

.cbig {
  position: relative;
  width: 50vh;
  height: 50vh;
  background-color: lightblue;
  border-radius: 50%;
  margin: 5%;
}
.csmall {
  position: absolute;
  top: -5%;
  left: 5%;
  width: 30%;
  height: 30%;
  background-color: lightblue;
  border: 2px solid white;
  border-radius: 50%;
}

＆＃13;

<div class="cbig">
  <div class="csmall"></div>
</div>

＆＃13;

＆＃13;

＆＃13;