Html 如何在CSS中绘制两个包含数字的非同心圆？

我想画两个圆，一个在另一个内，中心点不同。 然后我想在每个圆圈内加一个数字。如何在HTML和CSS中实现这一点。我已经附上了什么样的形象，我正在寻找

我之所以这样做，是因为我想将较小的圆作为较大圆的一部分来表示我的数据

以下是解决方案

。绿色圆圈{
颜色：绿色；
边框：2倍纯绿；
边界半径：100%；
高度：200px；
宽度：200px；
位置：相对位置；
}
.红圈{
颜色：红色；
边框：2倍纯红；
边界半径：100%；
高度：80px；
宽度：80px；
位置：绝对位置；
底部：20px；
右：15px；
}
.号码{
字体大小：24px；
位置：绝对位置；
顶部：20px；
左：30px；
}

8.
4.

首先尝试一些东西，然后发布代码。提示：使用“div”，其余的是css，尝试将div设置为圆形边缘，使其成为圆形。