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
Esta propiedad 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 | Deja el elemento sin recortar o elimina el recorte. |
clip-path | Crea un recorte con una forma geométrica básica. | |
clip-path | url("file.svg#name") | Crea un recorte con forma del elemento con id "name" de una imagen externa SVG. |
La propiedad clip-path en general puede tomar estos tres tipos de valores:
none, el valor por defecto, donde no utilizamos ningún tipo de recorte (o lo desactivamos si lo había)., es decir, una forma básica específica url(), donde indicamos una imagen SVG para utilizar un recorte personalizado usado en su interior mediante<clipPath>.
Mediante funciones de forma
Con la propiedad clip-path podemos crear recortes con formas geométricas básicas, utilizando las siguientes funciones de formas:
| Función CSS | Descripción | Más info |
|---|---|---|
inset() | Rectángulos o cuadrados que se amplían hacia dentro. | Aprender más sobre inset() |
circle() | Formas círculares. | Aprender más sobre circle() |
ellipse() | Elipses u óvalos. Idéntico a los círculos pero con ancho/alto dispares. | Aprender más sobre ellipse() |
polygon() | Polígonos y formas con 3 o más vértices. | Aprender más sobre polygon() |
path() | Trayectos SVG específicos. | Aprender más sobre path() |
Estas formas básicas de recorte nos permiten establecer unos parámetros para definir así la forma geométrica detalladamente. Por ejemplo, observa como utilizamos la propiedad polygon():
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
<div class="box"></div>
Observa que indicamos 3 puntos de corte:
0 0: El punto inicial100% 0: El segundo punto, arriba a la derecha50% 100%: El punto final, abajo al medio
Si quieres saber más sobre estos recortes, en este artículo explicamos esta y otras formas geométricas básicas diferentes que pueden ser utilizadas mediante la propiedad de
clip-path.
Usando SVG externo
Otra de las formas para realizar recortes es aprovechar y utilizar un SVG que tiene una forma geométrica definida. Para ello, simplemente mencionamos el fichero mediante la sintaxis url(), teniendo en cuenta que hay que mencionar el fichero .svg seguido de #shape1, donde shape1 es el nombre del ID con el clipPath:
.box {
background: indigo;
width: 200px;
height: 200px;
clip-path: url("shape1.svg#shape1");
}
<div class="box"></div>
El contenido del fichero shape1.svg sería este:
<svg xmlns="http://www.w3.org/2000/svg">
<clipPath id="shape1">
<path d="M0,0 H30 L30,26 H30 H34 V0 H65 V72 L32,100 0,72 Z" />
</clipPath>
</svg>
¡No olvides indicar el
xmlnsen el SVG! Esto podría evitar que se renderice correctamente en ciertos casos.
Usando un SVG de recorte
Además de las anteriores, también podemos embeber el código SVG en nuestro HTML. De esta forma, podemos reutilizar el SVG sin necesidad de hacer peticiones externas.
La sintaxis es la siguiente:
.box {
background: hotpink;
width: 200px;
height: 200px;
clip-path: url(#shape1);
}
<svg xmlns="http://www.w3.org/2000/svg">
<clipPath id="shape1">
<path d="M0,0 H30 L30,26 H30 H34 V0 H65 V72 L32,100 0,72 Z" />
</clipPath>
</svg>
<div class="box"></div>
Observa que el hueco que se aprecia en la parte superior es debido al SVG embebido original, que ocupa su tamaño, pero no se muestra, ya que el SVG sólo define un recorte reutilizable. Sólo se muestra el que definimos con clip-path.
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.
