Números CSS

dabblet.css

/**
 ** Números CSS
 **/
li {display:inline-block;
}

.cero {
width: 20px;
height: 100px;
border: 20px solid #cc0000;
border-radius: 20px;
background: transparent;
}

.uno {
position:relative;
margin-left:15px;
width: 20px;
height: 140px;
background: #cc0000;
}
.uno:before {
content: "";
position: absolute;
top:0;
left: -15px;
width: 20px;
height: 20px;
border-radius: 20px 0 0 ;
background: #cc0000;
}

.dos {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-right: 0;
border-radius: 20px 0 20px 20px;
background: transparent;
}
.dos:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-left: 0;
border-bottom: 0;
border-radius: 20px ;
}

.tres {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-left: 0;
border-radius: 20px;
background: transparent;
}
.tres:before {
position: absolute;
content: "";
top: -70px;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-left: 0;
border-bottom: 0;
border-radius: 20px ;
}

.cuatro {
position: relative;
width: 20px;
height: 70px;
margin-left: 40px;
background: #cc0000;
}
.cuatro:before {
position: absolute;
content: "";
top: -70px;
left: -40px;
width: 20px;
height: 60px;
border: 20px solid #cc0000;
border-top: 0;
border-radius: 20px 20px 0;
}

.cinco {
position: relative;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-left: 0;
border-radius: 20px;
background: transparent;
}
.cinco:before {
position: absolute;
content: "";
top: -70px;
left: 0px;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-right: 0;
border-bottom: 0;
border-radius: 20px 20px 0 0;
}

.seis {
position: relative;
width: 20px;
height: 50px;
border: 20px solid #cc0000;
border-radius: 20px;
background: transparent;
}
.seis:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 40px;
height: 50px;
border: 20px solid #cc0000;
border-right: 0;
border-bottom: 0;
border-radius: 20px 20px 0 0;
}

.siete {
position:relative;
margin-left:30px;
width: 20px;
height: 140px;
background: #cc0000;
}
.siete:before {
content: "";
position: absolute;
top:0;
left: -30px;
width: 40px;
height: 20px;
border-radius: 20px 0 0 ;
background: #cc0000;
}

.ocho {
position: relative;
width: 20px;
height: 50px;
border: 20px solid #cc0000;
border-radius: 20px;
margin-top: 50px;
background: transparent;
}
.ocho:before {
position: absolute;
content: "";
top: -70px;
left: -20px;
width: 20px;
height: 30px;
border: 20px solid #cc0000;
border-radius: 20px;
}

.nueve {
position: relative;
width: 20px;
height: 70px;
margin-top: 70px;
margin-left: 40px;
background: #cc0000;
}
.nueve:before {
position: absolute;
content: "";
top: -70px;
left: -40px;
width: 20px;
height: 30px;
border: 20px solid #cc0000;
border-radius: 20px 20px 0;
}

dabblet.html

<ul>
<li><div class="cero"></div></li>
<li><div class="uno"></div></li>
<li><div class="dos"></div></li>
<li><div class="tres"></div></li>
<li><div class="cuatro"></div></li>
<li><div class="cinco"></div></li>
<li><div class="seis"></div></li>
<li><div class="siete"></div></li>
<li><div class="ocho"></div></li>
<li><div class="nueve"></div></li>
</ul>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}