Formas CSS

dabblet.css

/**
 * Formas CSS
 */
li {display:inline-block;}
.cuadrado {
width: 100px;
height: 100px;
background: #cc0000;
}

.rectangulo {
width: 100px;
height: 150px;
background: #cc0000;
}

.triangulo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #cc0000;
}

.circulo {
width: 100px;
height: 100px;
border-radius: 50px;
background: #cc0000;
}

.ovalo {
width: 150px;
height: 100px;
border-radius: 75px / 50px;
background: #cc0000;
}

.cilindro {
width: 100px;
height: 150px;
border-radius: 150px / 50px;
background: #cc0000;
}

.bala {
width: 100px;
height: 150px;
border-radius: 50px 50px 0 0;
background: #cc0000;
}

.pantalla {
position: relative;
margin: 0 10px;
width: 150px;
height: 100px;
border-radius: 75px / 10px;
background: #cc0000;
}
.pantalla:before {
 content: "";
 position: absolute;
 top: 10px;
 bottom: 10px;
 right: -5px;
 left: -5px;
 background: inherit;
 border-radius: 5px / 25px;
}

.pacman {
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 50px solid #cc0000;
 border-left: 50px solid #cc0000;
 border-bottom: 50px solid #cc0000;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-left-radius: 50px;
 border-bottom-right-radius: 50px;
}

.barra {width: 150px;
height: 40px;
border-radius: 40px;
background: #cc0000;
}

.bocadillo {
position: relative;
margin-top: 20px;
width: 150px;
height: 100px;
border-radius: 40px;
background: #cc0000;
}
.bocadillo:before {
content: "";
position: absolute;
top: -20px;
left: 35px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 30px solid transparent;
border-bottom: 20px solid #cc0000;
}

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

.cerradura {
position: relative;
background: #cc0000;
margin-bottom: 60px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #cc0000;
}
.cerradura:after {
content: "";
position: absolute;
top: 94px;
left:8px;
width:45px;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid #cc0000;
}

.flecha {
position: relative;
margin-top: 70px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid #cc0000;
}
.flecha:before {
content: "";
position: absolute;
top: -150px;
left: -30px;
width: 20px;
height: 60px;
border: 20px solid #cc0000;
border-radius: 30px / 30px;
background: #fff;
}

.yinyang {
position: relative;
width: 50px;
height: 100px;
border-color: #cc0000;
border-style: solid;
border-width: 1px 50px 1px 1px;
border-radius: 100px;
background: #fff;
}
.yinyang:before {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 12px;
height: 12px;
border: 19px solid #cc0000;
border-radius: 28px;
background: #fff;
}
.yinyang:after {
content: "";
position: absolute;
top: 50px;
left: 25px;
width: 12px;
height: 12px;
border: 19px solid #fff;
border-radius:28px;
background: #cc0000;
}

.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: #fff;
}
.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: #fff;
}
.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: #fff;
}
.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: #fff;
}
.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;
background: #fff;
}
.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-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

<!-- content to be placed inside <body>…</body> -->
<ul id="formas">
<li><div class="cuadrado"></div></li>
<li><div class="rectangulo"></div></li>
<li><div class="triangulo"></div></li>
<li><div class="circulo"></div></li>
<li><div class="ovalo"></div></li>
<li><div class="cilindro"></div></li>
<li><div class="bala"></div></li>
<li><div class="pantalla"></div></li>
<li><div class="pacman"></div></li>
<li><div class="barra"></div></li>
<li><div class="bocadillo"></div></li>
<li><div class="cero"></div></li>
<li><div class="cerradura"></div></li>
<li><div class="flecha"></div></li>
<li><div class="yinyang"></div></li>
<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":"1","page":"all"}