Puedes usar un div
para cada cuarto de círculo, algo parecido a esto:
.cuarto {
position absolute;
width:100px;
height:100px;
float:left;
}
#cuarto1{
background-color:blue;
border-radius: 100% 0 0 0;
}
#cuarto2{
background-color:red;
border-radius: 0 100% 0 0;
}
#cuarto3{
background-color:green;
border-radius: 0 0 0 100%;
clear:both;
}
#cuarto4{
background-color:yellow;
border-radius: 0 0 100px 0;
}
<div id="cuarto1" class="cuarto"></div>
<div id="cuarto2" class="cuarto"></div>
<div id="cuarto3" class="cuarto"></div>
<div id="cuarto4" class="cuarto"></div>
Para colocar el texto, puedes usar otro div y colocarlo donde creas conveniente, o jugar con los paddings. Algo parecido a esto:
.cuarto {
position absolute;
width:67px;
height:67px;
float:left;
}
#cuarto1{
background-color:blue;
border-radius: 100% 0 0 0;
padding: 33px 0px 0px 33px;
}
#cuarto2{
background-color:red;
border-radius: 0 100% 0 0;
padding: 33px 33px 0px 0px;
}
#cuarto3{
background-color:green;
border-radius: 0 0 0 100%;
padding: 16px 0px 17px 33px;
clear:both;
}
#cuarto4{
background-color:yellow;
border-radius: 0 0 100px 0;
padding: 16px 33px 17px 0px;
}
<div id="cuarto1" class="cuarto">CV visto</div>
<div id="cuarto2" class="cuarto">Contratación</div>
<div id="cuarto3" class="cuarto">Entrevista</div>
<div id="cuarto4" class="cuarto">Entrega de papeles</div>