⇪

Dibujar formas geometricas en el css

facebook-svg gplus-svg twitter-svg

Como dibujar un circulo

Para dibujar un circulo crearemos una caja cuadrada ( <div id="circulo"> ) con un border-radius muy grande, algo disparatado como 1000px. De hecho cualquier valor >= 50% tendría que funcionar.

#circulo {
  width: 150px;
  height: 150px;
  background: #8AC007;
  border-radius: 1000px;
}

Más información sobre: border-radius

Como dibujar un óvalo

Para dibujar un óvalo crearemos una caja rectangular (<div id="ovalo">) con un border-radius asímetrico igual con 50% de su base / 50% de su altura.

#ovalo {
  width: 200px;
  height: 100px;
  background: #8AC007;
  border-radius: 100px/50px;
}

Más información sobre: border-radius

Como dibujar un triangulo

Antes de empezar a dibujar un triangulo miremos un poco la propiedad border. 

#triangulo_test {
  width: 50px;
  height: 50px;
  border: 30px solid #000;
  border-bottom: 30px solid #8AC007;
}

Observamos que los bordes se juntan en bisel. Sabiendo esto, ya es muy fácil construir un triangulo. 

#triangulo1 {
  width: 75px;
  height: 0px;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  border-left: 75px solid #8AC007;
}
#triangulo2 {
  width: 50px;
  height: 0px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 75px solid #8AC007;
}
#triangulo3 {
  width: 75px;
  height: 0px;
  border-top: 75px solid transparent;
  border-left: 75px solid #8AC007;
}

Como dibujar una estrella de 6 puntas

Para dibujar formas geométricas complejas utilizaremos los pseudoselectores :before y :after para generar formas geométricas adyacentes, que combinaremos con la de la caja principal.

#estrella6{
width:1px;
height:1px;
border-bottom:100px solid #8AC007;
border-left:55px solid transparent;
border-right:55px solid transparent;
}
#estrella6:before{
content:"";
display:block;
width:1px;
height:1px;
border-top:100px solid #8AC007;
border-left:55px solid transparent;
border-right:55px solid transparent;
position:relative;
bottom:-30px/*30%*/;
left:-55px/*55%*/;}

Como dibujar una estrella de 5 puntas

Utilizaremos de nuevo los pseudoselectores :before y :after para generar formas geométricas adyacentes, que combinaremos con la de la caja principal.

#estrella5{
margin:10px;	
width:1px;
height:1px;
border-bottom:140px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
#estrella5:before{
content:"";
display:block;
width:1px;
height:1px;
border-top:45px solid red;
border-left:60px solid transparent;
border-right:60px solid transparent;
position:relative;
top:45px;
left:-60px;
} 
#estrella5:after{
content:"";
display:block;
width:1px;
height:1px;
border-bottom:50px solid white /*el color de fondo*/;
border-left:75px solid transparent;
border-right:75px solid transparent;
position:relative;
top:46px;
left:-75px;
}