堆叠两个相对位于 CSS 的圆圈

Question

谁能帮我实现这种有基础的圈子:

我很绝望。这些圈子必须有响应。

Answer 1

我正在发布您在评论中提出的纯 CSS 方法。

将.small-circle绝对定位到相对定位 .big-circle.
让大圆的 width 和 height 以视口大小为单位。
对较小圆圈中的 left 和 top 值使用 %。

.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%;
}

<div class="big-circle">
  <div class="small-circle"></div>
</div>

Answer 2

.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%;
}

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

堆叠两个相对位于 CSS 的圆圈

Stack two circles relatively positioned in CSS

html

css

css-shapes