我画了图,但我不知道怎么在里面加文字。
我想将文本添加到圆圈中。
.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>
最佳答案
你可以尝试这样的事情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>
关于javascript - 怎么画同心圆嵌套图?使用 HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47972994/