Convert image to div through css - html

Question

Can you help the image below convert to Div or table.
I have tried but I have stucked only till circle. Div 1, Div 2 till Div 7 I will replace with the Title, So I need those in middle of DIV.I don't need a 3d border, but if you help me with one I will be grateful.
#container {
position: relative;
width: 100px;
height: 100px;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0 100px 100px 50px);
}
.pie {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0 50px 100px 0px);
}
#part1-wrapper {
transform: rotate(0deg);
}
#part1 {
background-color: #3266FF;
transform: rotate(90deg);
}
#part2-wrapper {
transform: rotate(90deg);
}
#part2 {
background-color: green;
transform: rotate(90deg);
}
#part3-wrapper {
transform: rotate(180deg);
}
#part3 {
background-color: #BF0000;
transform: rotate(90deg);
}
#part4-wrapper {
transform: rotate(270deg);
}
#part4 {
background-color: #7030A0;
transform: rotate(90deg);
}
<div id="container">
<div id="part1-wrapper" class="cover">
<div id="part1" class="pie"></div>
</div>
<div id="part2-wrapper" class="cover">
<div id="part2" class="pie"></div>
</div>
<div id="part3-wrapper" class="cover">
<div id="part3" class="pie"></div>
</div>
<div id="part4-wrapper" class="cover">
<div id="part4" class="pie"></div>
</div>
</div>

Answer 1

You can make this significantly simpler by using corner-specific border-radius.
#container {
position: relative;
width: 200px;
height: 200px;
}
.pie {
position: absolute;
width: 49%;
height: 49%;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 98px;
}
#part1 {
background-color: #3266FF;
top:0;
left:0;
border-top-left-radius: 100%;
}
#part2 {
background-color: green;
top:0;
right:0;
border-top-right-radius: 100%;
}
#part3 {
background-color: #BF0000;
bottom:0;
right:0;
border-bottom-right-radius: 100%;
}
#part4 {
background-color: #7030A0;
bottom:0;
left:0;
border-bottom-left-radius: 100%;
}
#part5 {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: #333394;
color: #fff;
text-align: center;
line-height:50px;
top:50%;
margin-top:-25px;
left:50%;
margin-left:-25px;
}
<div id="container">
<div id="part1" class="pie">part 1</div>
<div id="part2" class="pie">part 2</div>
<div id="part3" class="pie">part 3</div>
<div id="part4" class="pie">part 4</div>
<div id="part5">part 5</div>
</div>