¡Finalmente! Triángulos CSS sin trucos feos

Cualquiera que haya intentado hacer flechas HTML para votar a favor, globos de diálogo u otros elementos puntiagudos, sabe que para crear un triángulo solo de CSS, debe usar algún tipo de truco. Las dos soluciones más populares son crear triángulos a partir de bordes o usar caracteres Unicode.

Tenemos que admitir que estos dos trucos de CSS son bastante inteligentes, pero siguen siendo soluciones terribles y, como tales, hacen que nuestro código sea mucho más feo y menos flexible. Por ejemplo, no podemos tener un triángulo con una imagen de fondo, ya que los bordes y los caracteres solo pueden ser de un color.

Presentamos Clip-path

Clip-path es una adición bastante nueva a la especificación CSS que nos permite mostrar solo una parte de un elemento y ocultar el resto. Así es como funciona:

Digamos que tenemos un div rectangular ordinario elemento. Puede hacer clic en Ejecutar en el editor a continuación para ver el HTML renderizado.

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}
<div></div>

Para hacer un triángulo necesitaremos el polygon() función. Espera como argumento puntos 2D separados por comas que definirán la forma de nuestra máscara. Un triángulo =3 puntos. Prueba y cambia los valores para ver cómo se transforma la forma.

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* The points are: centered top, left bottom, right bottom */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
<div></div>

Todo lo que está dentro del camino que creamos permanece, todo lo que está fuera está oculto. De esta manera podemos hacer no solo triángulos, sino todo tipo de formas asimétricas que se comportarán como bloques CSS normales.

El único inconveniente de esta técnica es que tenemos que calcular cuidadosamente las coordenadas de nuestros puntos para obtener un buen triángulo.

Aún así, es mucho mejor que usar bordes o ▲.

Soporte del navegador

Si abre la página caniuse para clip-path, las cosas no se ven muy bien a primera vista, pero en realidad la propiedad funciona perfectamente bien sin prefijo en Chrome y con el -webkit- prefijo en Safari. Los usuarios de Firefox tienen que esperar hasta la versión 53. IE/Edge está retrasado como de costumbre, pero podemos esperar soporte en el futuro.

Lecturas adicionales

El clip-path property tiene muchos otros trucos bajo la manga, incluyendo algo de magia SVG. Para obtener más información al respecto, consulte los enlaces a continuación.

  • Clip-path en MDN - aquí
  • Tutorial detallado para clip-path en Codrops - aquí
  • Clippy, un generador de ruta de recorte - aquí