Proyectos Web

Guía para usar la propiedad Clip-path CSS

18 de Abril del 2018

Desde los inicios de la web se nos ha acostumbrado a que todo sea rectangular(o a veces circular al usar la propiedad border-radius). Pero eso ya se está dejando de lado con muchas de las nuevas propiedades que van siendo compatibles cada vez más en los navegadores. SVG es una de las alternativas, sin embargo en este artículo analizaremos como funciona la propiedad clip-path.

¿Cómo funciona la propiedad Clip-path de CSS?

Esta propiedad no transforma ni crea nuevos objetos. Lo que hace es crear una máscara con un recorte, el cual deja ver parte de un elemento o imagen. En cuanto a la compatibilidad de esta propiedad, por el momento está disponible en Chrome y Firefox, puedes ver la compatibilidad en el siguiente enlace https://caniuse.com/#search=clip-path

Sin embargo es bueno ir conociendo y manejando esta propiedad. Los valores para esta propiedad te los mostramos a continuación:

  • clip-path:inset(): La máscara se comporta como un borde alrededor del elemento. El valor o valores que van dentro del paréntesis indican el tamaño de ese borde; el comportamiento de los valores es como las agujas del reloj. Ejm:

         Clip-path:inset(50px); 50 px en todos los lados

         Clip-path:inset(50px 30px); 50 px hacia arriba y hacia abajo.

         Clip-path:inset(50px 30px 40px); 50 px hacia arriba, 30px a la derecha y a la izquierda y 40px abajo.

         Clip-path:inset(20px 10px 30px 15px);El orden sería: 20px arriba, 10px a la derecha, 30px abajo y 15px a la izquierda.

Cabe recalcar que los valores pueden ser en px o % o en otra unidad válida de CSS. Adicionalmente podemos redondear las esquinas de este borde usando round después de poner los valores de inset. su comportamiento es de igual forma como las agujas del reloj. Ejm:

clip-path: inset(10% round 200px 0); Con este código estaríamos mostrando lo siguiente: 

  • clip-path: ellipse(): Podremos crear máscaras de recorte eliptico. La forma de usarlo es la siguiente:

clip-path: ellipse( at <posición>); EL primer valor es cuanto tendrá el eje en X es decir en horizontal, mientras que el segundo valor es en el eje Y es decir en vertical. Luego colocamos "at" seguido de la posición del ellipse, esto puede ser en palabras clave(top, bottom, right, left) o usando porcentajes, pero no ambos. Ejm:

clip-path: ellipse(250px 150px at 50%);  Esto crearía un ellipse de 250px de ancho y 150px de alto y está centrado.

 

  • clip-path: circle(): Su comportamiento es parecido a ellipse, solo que la sintaxis varía un poco.

clip-path: circle( at <posición>); El primer valor es el radio que tendrá el circulo. Ejm:

clip-path: circle(200px at center); Con este código creamos un máscara círcular.

  • clip-path: polygon(): Quizá el más complicado para muchos, pero esto es sencillo si comprendemos como funciona las coordenadas.

Al momento de crear la máscara debemos ver el elemento o imagen como un plano cartesiano, imagina este plano encima del elemento. Si te desplazas a la derecha es el valor en X(positivo), mientras que si vas hacia abajo es el valor en Y(positivo). al usar polygon() se escriben las coordenadas a usar, cada coordenada es un punto y CSS va dibujando en base a esos puntos. La sintaxis es:

clip-path: polygon() Como mínimo deben haber 3 valores. Por ejemplo para mostrar un triángulo el código sería:

clip-path: polygon(50% 0, 80% 90%, 20% 90%);

En nuestro canal hemos subido un video explicando todo lo que hemos visto hasta ahora:

Esperamos que esta guía te sea de mucha utilidad.