ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

La propiedad clip-path

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 | | url(file.svg#name) 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 , es decir, una forma básica específica de las que veremos a continuación, o usar 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 podemos utilizar cualquiera de los siguientes:

Valores Descripción
inset(top right bottom left) Recorta en forma rectangular hacia dentro.
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.

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:

Clip-path CSS usando inset

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í:

Clip-path CSS usando circle

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%).

Clip-path CSS usando polygon

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.

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.

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.