Skip to main content
se añadieron 1149 caracteres en el cuerpo
Origen Enlace

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>

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>

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>

Origen Enlace

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>