If you're looking to achieve a similar effect, consider using the following JsFiddle Example
The concept involves encapsulating the text within a span element nested inside each 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>
Each span element will be styled with position:absolute;, while its parent div will have position:relative;.
This allows for easy positioning of the text content.
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>