使用css在彼此内创建4个圆圈

Question

我正在尝试使用CSS将最后一个中的文本放在彼此内的4个圆圈(没有背景颜色,只有边框颜色).

示例:http://imgur.com/a/5vUKI

有关如何做到这一点的任何想法？

Answer 1

干得好.这应该可以帮助您入门.

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