如何绘制同心圆嵌套图？使用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

我们的想法是将文本放在每个span的{​​{1}}中。

div

每个范围将使用<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> ，而父 div 将使用position:absolute;。

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

position:relative;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;