Cómo crear triangulos en CSS sin necesidad de utilizar ni trucos ni trampas

Cualquier persona que haya intentado crear flechas para votar con HTML, burbujas de diálogo o algún que otro elemento puntiagudo, sabe que para crear un triángulo CSS debes utilizar algún tipo de hack. Las dos soluciones más populares son las de crear tus triángulos fuera de los bordes, o la de utilizar caracteres unicode.

Tenemos que admitir que ambos hacks CSS son bastante inteligentes, pero seamos serios, son una auténtica chapuza, y como tal, hace que nuestro código luzca mucho más feo y menos flexible. Por ejemplo, no podemos tener un triángulo como imagen de fondo, ya que los bordes y los caracteres sólo pueden ser de un color.

Introducción a Clip-path

Clip-path es una nueva inserción en la especificación CSS que nos permite mostrar sólo parte de un elemento y ocultar el resto. Así es como funciona:

Digamos que tenemos un elemento div rectangular normal y corriente. Este sería su código fuente, tanto el HTML, como el CSS:

CSS

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

HTML

<div></div>

Para crear el triángulo necesitaríamos hacer uso de la función polygon(). Para especificar nuestra mascara habrá que pasarles los puntos 2D separados por comas como argumento a la función. Un triangulo = 3 puntos. Intenta cambiar estos valores para ver cómo se transforma la forma.

CSS

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%);
}

HTML

<div></div>

Todo lo que esté dentro de los puntos especificados se mostrará, lo que esté fuera de dichos puntos, permanecerá oculto. Con este método no solo podrás crear triángulos, si no todo tipo de formas geométricas con solo unas cuantas líneas de CSS y un elemento HTML.

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

Sin embargo, es mucho mejor que usar bordes o ▲.

Soporte con el navegador

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

Fuente: tutorialzine.com