La propiedad clip-path
Diferentes formas de realizar recortes mediante CSS
Hace algún tiempo, existió una propiedad CSS llamada clip, cuya intención era permitir recortes con ciertas formas como rectángulos. Sin embargo, hoy en día ha sido marcada como obsoleta, en favor de una nueva propiedad llamada clip-path.
La propiedad clip-path
La propiedad clip-path permite realizar un recorte con una forma concreta, ocultando toda la región externa del recorte. Su utilización es muy sencilla y permite realizar formas muy flexibles y versátiles.
La sintaxis de la propiedad es la siguiente:
| Propiedad | Valor | Descripción |
|---|---|---|
clip-path |
none | |
Efectua un recorte con una forma concreta. |
La propiedad clip-path en general puede tomar 3 tipos de valores: none, el valor por defecto, donde no utilizamos ningún tipo de recorte (o lo desactivamos si lo había), un valor url(), donde indicamos una imagen SVG para utilizar un recorte personalizado usado en su interior mediante <clipPath>.
Formas básicas de recorte
Las formas básicas de recorte son diferentes palabras clave que permiten realizar un tipo de recorte particular, donde en cada una de ella le podemos pasar parámetros para definir sus coordenadas.
Dentro de los valores
| Valores | Descripción |
|---|---|
inset(top right bottom left) |
Recorta en forma rectangular hacia dentro. |
inset(top right bottom left round radius) |
Idem al anterior, con bordes redondeados, tamaño radius. |
circle(size at x y) |
Recorta en forma circular con un tamaño size con centro en x,y. |
ellipse(sx sy at x y) |
Idem al anterior, pero diferenciando tamaño de ancho sx y de alto sy. |
polygon(x y, x y, ...) |
Recorta un polígono siguiendo las coordenadas establecidas. |
path(coords) |
Recorta siguiendo los datos de un trayecto SVG. |
Veamos como funcionan cada una de estas funciones de formas básicas.
Recorte usando inset
En el caso de los recortes inset(), estamos estableciendo un cuadrado o rectángulo, donde cada parámetro (top, right, bottom, left) indicará un porcentaje que representa la distancia desde su punto concreto.
<div class="box"></div>
<style>
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: inset(0 0 50% 50%);
}
</style>Así pues, inset(0% 0% 50% 50%) parte desde el 0% de la parte superior, desde el 0% de la parte derecha, desde la mitad (50%) de la parte inferior y desde la mitad (50%) de la parte izquierda:
También es posible redondear los bordes del cuadrado o rectángulo, indicando al final la palabra clave round junto al radio de borde que quieres especificar. Por ejemplo:
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: inset(50px round 20px);
}Observa que en este caso, hemos establecido sólo un valor para los parámetros, es decir, equivalente a inset(50px 50px 50px 50px), pero además incluimos round 20px, por lo que va a establecer un border-radius de 20px en cada esquina, es decir, algo similar a border-radius: 20px 20px 20px 20px.
Recorte usando circle/ellipse
En el caso de los recortes circle(), vamos a establecer un recorte circular en una porción del elemento, pudiendo recortar formas como círculos, medias lunas, etc... En el caso del ellipse() es exactamente igual que el de circle() sólo que en el primero podemos establecer un ancho y alto al elipse y en el segundo sólo podemos establecer un tamaño de ancho y alto (que será siempre el mismo).
<div class="box"></div>
<style>
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: circle(50% at 50% 0);
}
</style>Así pues, en este caso, observa que indicamos circle(50% at 50% 0). El primer parámetro indica el tamaño del recorte en forma de círculo (50%), y las coordenadas después de at es el punto central del círculo: 50% en x y 0% en y. Quedaría algo así:
Como ya hemos comentado, la diferencia respecto a ellipse() es que en el tamaño de la elipse le podemos indicar el tamaño de ancho y de alto, mientras que en el círculo este valor es el mismo en ambos y sólo se indica uno:
<div class="box"></div>
<style>
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: ellipse(50% 25% at 50% 0);
}
</style>Recorte usando polygon
Probablemente, el tipo de recorte básico más potente y versátil sea el recorte poligonal utilizando polygon(). Su funcionamiento es muy sencillo, pero a la vez muy flexible, simplemente hay que indicar los puntos de corte deseados e iremos realizando el recorte:
<div class="box"></div>
<style>
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
</style>En este ejemplo, polygon() tiene 3 puntos de corte separados por comas (cada uno con sus coordenadas en X e Y), formando un triángulo, pero se pueden indicar tantos puntos de corte como se quiera (incluso con valores negativos o superiores a 100%).
Aunque es posible utilizar otras unidades, lo más habitual suele ser establecer las coordenadas con porcentajes, ya que resulta muchísimo más sencillo y claro, siendo también mucho más escalable y mantenible si el elemento padre cambia sus dimensiones.
Recorte usando path
Si buscamos algo un poco más flexible y potente, necesitamos el recorte utilizando la función path(). Con ella, podemos definir un trayecto SVG para aplicar como recorte, consiguiendo formas mucho más complejas, imposibles (o muy difíciles) de conseguir con sólo HTML/CSS.
En los parámetros de path() se pasa un d (data) de un elemento <path> de SVG.
<div class="box"></div>
<style>
.box {
width: 300px;
height: 300px;
background: url("gato.jpg") center / cover;
clip-path: path("m4,87l93,0l29,-84l29,84l93,0l-76,52l29,84l-76,-52l-76,52l29,-84l-76,-52z");
}
</style>En este caso, hemos definido una estrella a través de una serie de coordenadas de un trayecto SVG.
Usando un SVG de recorte
Además de las formas básicas, también podemos utilizar código SVG (o una imagen SVG externa) que contengan una definición de un elemento <clipPath>. De esta forma, desde CSS le indicamos que utilice dicho recorte en una zona de nuestra página, pudiendo ayudarnos de SVG para hacer formas mucho más específicas.
La sintaxis es la siguiente, donde se hace referencia a un fichero externo mediante url():
| Valores | Descripción |
|---|---|
url(#name) |
Recorta una forma siguiendo un <clipPath> SVG con el id name. |
url(file.svg#name) |
Idem al anterior, pero desde un fichero SVG externo file.svg. |
Observa que en la primera de ellas no se indica el nombre del fichero SVG, sino que solamente se indica el identificador del elemento, es decir, el nombre del id del elemento a referenciar. En este caso, se buscará el <clipPath> en un código SVG en línea en el propio documento HTML.
En el segundo caso, indicamos tanto el nombre del fichero .svg como el id, por lo tanto, buscará el <clipPath> con el id indicado en un archivo externo.
Así pues, un ejemplo podría ser el siguiente:
<svg>
<clipPath id="shape1">
<path d="M 0,0 H 29 L 7,26 H 58 L 34,0 H 65 V 72 L 32,100 0,72 Z" />
</clipPath>
</svg>
<div class="box"></div>
<style>
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: url(#shape1);
}
</style>De esta forma, hemos indicado que utilice el recorte del fichero .svg con el id shape1. En el caso de tenerlo en un fichero .svg externo, simplemente habría que indicar el nombre antes del id: url(file.svg#shape1).
El soporte de esta propiedad es bastante bueno a día de hoy, aunque algunos navegadores podrían soportar sólo los recortes SVG en código SVG en línea y no en archivos externos. Mozilla Firefox es el que tiene un soporte completo de estas características.
OJO: Al realizar recortes, toda la región que quede fuera del mismo no se dibujará en el navegador. En Clippy (BennettFeely) tienes una fantástica herramienta para crear recortes personalizados de forma gráfica y rápida.
