En este tutorial aprenderemos cómo crear un triángulo con CSS.

CSS, cada vez, nos permite muchas más cosas en la web, desde crear figuras hasta realizar complejas animaciones en nuestros sitios web. Hoy, te enseñaré a crear un triángulo solo con CSS.

¿Cómo creamos un triángulo?

Para crear esto vamos a hacer uso de los bordes. Si no sabes cómo dibujar un borde, es muy fácil: solo debemos agregar la propiedad border a nuestro selector con un mínimo de tres valores: el ancho, el tipo y el color del borde. Veamos un ejemplo:

See the Pen KdGBja by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

En el ejemplo anterior hemos creado un div con 100px de ancho y de alto, además le hemos agregado un borde de 2px de ancho, tipo sólido y de color negro. Ahora esta es la manera resumida de escribir un borde, nosotros también podríamos decirle específicamente qué lado de la caja queremos y qué hará un borde, para eso tenemos 4 propiedades: border-top, border-right, border-bottom y border-left. Cambiemos los colores y anchos de cada borde.

See the Pen ZbqMzX by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

Ahora, si se dan cuenta, hemos agregado el los cuatro bordes separados y de diferentes colores. Además le hemos puesto 100px de ancho a cada borde.En las intersecciones de dos bordes se genera una división, la mitad es de un borde y la otra mitad del otro borde. Con esa intersección que se genera vamos a poder crear nuestro circulo.

Vamos a establecer al div un width y height de 0px y veamos que sucede.

See the Pen MaPqWv by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

Ahora vemos que ya se generaron 4 triángulos de diferente color. Que debemos hacer para quedarnos con solo un triangulo. Muy simple, debemos poner color transparente a los bordes adyacentes del triángulo y al borde que esta al frente simplemente eliminarlo. Veamos como nos queda.

See the Pen wKYEBM by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

Y como ven, ya tenemos nuestro triángulo hecho con CSS, pero lo más importante es entender como se logra esto. Ahora si desean un triangulo hacia la derecha, izquierda, arriba o abajo solo deben jugar con los bordes.

¿Para qué me sirve esto?

Ya aprendimos cómo desarrollarlo. Ahora, ¿para qué  nos sirve? Como pueden observar, en los menús suele haber un triángulo  para desplegar un sub menu, como es el caso de Facebook y otras webs, en lugar  de traer una imagen o ícono es mejor hacerlo con CSS para que no haga  peticiones de más al servidor. Seguramente podrán aplicarlo de muchas maneras  para desplegar elementos.

Espero que les sea de  utilidad este tutorial y puedan haber comprendido como crear figuras con CSS, ya que entendiendo bien como funcionan las cosas podemos crear algo nuevo. Si están adentrándose al mundo web les recomiendo el curso de HTML y CSS. ¡Los espero en un próximo tutorial!