如何在CSS中绘制两个带有数字的非同心圆？

Question

我想绘制两个圆圈，一个在另一个内部，具有不同的中心点。 然后我想在每个圆圈内添加一个数字。我怎样才能在HTML和CSS中实现这一点。我附上了我正在寻找的样本图像。

为什么我这样做是因为我想将较小的圆圈作为较大圆圈的一部分来表示我的数据。

Answer 1

这是解决方案

＆＃13;

＆＃13;

.green-circle {
  color: green;
  border: 2px solid green;
  border-radius: 100%;
  height: 200px;
  width: 200px;
  position: relative;
}
.red-circle {
  color: red;
  border: 2px solid red;
  border-radius: 100%;
  height: 80px;
  width: 80px;
  position: absolute;
  bottom: 20px;
  right: 15px;
}
.number {
  font-size: 24px;
  position: absolute;
  top: 20px;
  left: 30px;
}

＆＃13;

<div class="green-circle">
  <div class="number">8</div>
  <div class="red-circle">
    <div class="number">4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;