08

4

Crea triángulos con CSS

Cuando pretendemos hacer diseños complejos o novedosos algunas veces nos encontramos con que necesitamos crear triángulos y antiguamente se recurría a imágenes.
Pero aunque las imágenes nos dan mayor libertad la verdad es que crear triángulos con CSS es algo muy fácil, usando los bordes de un elemento, y que será mucho más eficiente que usar imágenes.

Este primer ejemplo ilustra un caso en el que podríamos necesitas triángulos en una web, como decoración de una tira que podríamos usar para títulos.
El funcionamiento en muy simple, cuando establecemos un borde ancho con varios colores distintos, la unión entre ambos se hace en diagonal (como veremos más abajo), por lo que podemos jugar con esta curiosidad del CSS y así crear fácilmente triángulos.

Funcionamiento del los bordes

En el siguiente ejemplo se puede ver claramente porque podemos hacer triángulos gracias a los bordes, lo bueno de este efecto es que podemos combinar de distintas formas los bordes y crear distintos ángulos del triángulo y posteriormente añadiremos también el redondeo del borde.

Para hacer esto simplemente tenemos que cambiar el color de dos de los bordes, pero vamos a ver como hacer los triángulos del primer ejemplo.

Para este ejemplo concreto que mide 10px de alto y ancho establecemos justo la mitad para el borde (5px) y lo establecemos con el color que queramos, pero para hacer transparentes la parte de un lado y de abajo estableceremos el color transparent.

1. /* Triángulo de la izquierda */
2. .triangulo_izquierda{
   

border:7px solid #2c4774;


border-bottom-color:transparent;


border-left-color:transparent;


3. }
   

Para crear la propia tira lo que tenemos que hacer es usar posiciones absolutas y relativas (si no tienes claro como funcionan Puedes leer este artículo).

Hacer triangulos

Tras ver un poco como funcionan voy a poneros varios ejemplos para ver el tipo de triángulos que se pueden hacer.

1. .tri_1{
   

border:7px solid #2c4774;


border-top-color:transparent;


border-left-color:transparent;


2. }
   
4. .tri_2{
   

border:7px solid #2c4774;


border-right-color:transparent;


border-left-color:transparent;


border-width:0px 30px 60px;


5. }
   
7. .tri_3{
   

border:7px solid #2c4774;


border-right-color:transparent;


border-left-color:transparent;


border-width:0px 10px 60px 50px;


8. }
   

Con el ancho de el borde podemos regular el ángulo de cada triángulo, teniendo en cuenta que el ancho determina donde estará el pico del triángulo (si aumentamos el borde izquierdo el pico irá hacia la derecha, como pasa en el tercer triángulo, tri_3).

Usando bordes redondeados

A este efecto se le puede añadir bordes redondeados, con lo que podemos crear figuras más complejas.

Como vemos no es difícil crear un semicírculo o una especie de cono (o porción de pizza), simplemente he añadido un border-radius del 50%, lo que hace que la figura sea un círculo.