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

Question

我想绘制两个圆圈，一个在另一个的中心点。 然后我想在每个圆圈内添加一个数字。我如何在HTML和CSS中实现这一点。我附上了我正在寻找的示例图片。

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

Answer 1

下面是解

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

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