Javascript 如何绘制同心圆嵌套图？使用HTML和CSS

我画了这幅画，但我不知道如何在里面添加文字

我想把文字添加到圆圈中

.shapebooder{
边框：1px纯黑；
}
.圆圈{
边界半径：50%；
}
.外部{
背景颜色：蓝色；
宽度：400px；
/*您也可以通过%来定义它*/
高度：400px；
/*您也可以通过%来定义它*/
位置：相对位置；
边框：1px纯黑；
边界半径：50%；
}
.内部{
背景颜色：黄色；
最高：50%；
左：25%；
/*货柜*/
宽度：50%；
/*货柜*/
身高：50%；
/*货柜*/
位置：相对位置；
边框：1px纯黑；
边界半径：50%；
}

---

您可以尝试类似的方法

想法是将每个

div

的文本放在

span

中

<div class="outer circle shapeborder">
  <span>Release planning</span>
  <div class="inner circle shapeborder">
    <span>Iteration planning</span>
      <div class="inner circle shapeborder">
        <span>Daily planning</span>
      </div>
    </div>
</div>

.shapebooder{
边框：1px纯黑；
}
.圆圈{
边界半径：50%；
}
.外部{
背景颜色：蓝色；
宽度：400px；
/*您也可以通过%来定义它*/
高度：400px；
/*您也可以通过%来定义它*/
位置：相对位置；
边框：1px纯黑；
边界半径：50%；
}
.内部{
背景颜色：黄色；
最高：50%；
左：25%；
/*货柜*/
宽度：50%；
/*货柜*/
身高：50%；
/*货柜*/
位置：相对位置；
边框：1px纯黑；
边界半径：50%；
}
div{
位置：相对位置；
}
跨度{
位置：绝对位置；
最高：5%；
左：50%；
转化：translateX（-50%）；
}
最后一个孩子{
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

发布计划
迭代规划
日常计划

创建实际图像不是更容易吗？还是SVG。有一些很棒的在线SVG编辑器，比如

div {
  position: relative;
}
span {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}
span:last-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}