Cómo crear triángulos en CSS y una animación para entenderlo mejor

CSS3 por defecto no permite crear figuras geométricas, a excepción del cuadrado o rectángulo definido por los propios límites de un contenedor o elemento, sin embargo con el border-radius podemos simular tener una figura geométrica como el óvalo o círculo. Se pueden crear muchas más figuras usando las propiedades que nos da CSS pero una en especial siempre causa ruido y curiosidad: el triángulo.

Y es que sitios como Facebook o portales de noticias suelen incluir triángulos como parte de sus elementos web en las interfaces de usuario, y aunque anteriormente el método para hacerlo era hacer una imagen de un triángulo, existe un hack para que con sólo CSS se logre simular lo mismo.

En este tutorial vamos a ver cómo crear triángulos en CSS y una animación para entenderlo mejor, porque el código como tal no dice nada, es muy abstracto, y para entenderlo necesitamos una animación para ver qué pasa con nuestro container para que de un código a otro se transforme mágicamente.

El código para crear un triángulo en cualquier posición es como el siguiente. El método consiste en que una capa al tener un borde lo suficientemente grueso y un tamaño 0 es lógico pensar que las esquinas de los bordes se unen, formando 4 triángulos. Entonces basta con dejar transparente aquellos que no queremos mostrar y dejar únicamente uno con el color que queramos.

Ahora, si queremos un triángulo que apunte hacia arriba debemos esconder todos excepto el borde inferior, ya que ese crea la ilusión de un triángulo que apunta hacia arriba. De igual forma sucede para los demás, se muestre su contrario.

Si después de lo que les expliqué no entienden todavía les dejo una animación que ejemplifica lo que les quiero decir.

See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen

Entonces como ven no hay gran ciencia pero si mucha creatividad para formar nuevas figuras en base a propiedades que ya nos da CSS y que como ven no son nada del otro mundo para implementar.