javascript - 怎么画同心圆嵌套图？使用 HTML 和 CSS

Question

我画了图，但我不知道怎么在里面加文字。

我想将文本添加到圆圈中。

.shapeborder {
  border: 1px solid black;
}

.circle {
  border-radius: 50%;
}

.outer {
  background-color: blue;
  width: 400px;
  /* You can define it by % also */
  height: 400px;
  /* You can define it by % also */
  position: relative;
  border: 1px solid black;
  border-radius: 50%;
}

.inner {
  background-color: yellow;
  top: 50%;
  left: 25%;
  /* of the container */
  width: 50%;
  /* of the container */
  height: 50%;
  /* of the container */
  position: relative;
  border: 1px solid black;
  border-radius: 50%;
}

<div class="outer circle shapeborder">
  <div class="inner circle shapeborder">
    <div class="inner circle shapeborder"></div>
  </div>
</div>

Answer 1

你可以尝试这样的事情JsFiddle Example

想法是将文本放置在每个 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>

每个 span 将使用 position:absolute; 而父 div 将使用 position:relative;。

通过这样做，您可以轻松定位文本。

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

.shapeborder {
  border: 1px solid black;
}

.circle {
  border-radius: 50%;
}

.outer {
  background-color: blue;
  width: 400px;
  /* You can define it by % also */
  height: 400px;
  /* You can define it by % also */
  position: relative;
  border: 1px solid black;
  border-radius: 50%;
}

.inner {
  background-color: yellow;
  top: 50%;
  left: 25%;
  /* of the container */
  width: 50%;
  /* of the container */
  height: 50%;
  /* of the container */
  position: relative;
  border: 1px solid black;
  border-radius: 50%;
}

div {
  position: relative;
}

span {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

span:last-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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