Propiedad CSS clip-path

La propiedad clip-path define una región de recorte: la parte de un elemento que permanece visible. Todo lo que queda fuera de esa región se oculta — pero el área oculta sigue ocupando espacio en el diseño, simplemente no se pinta. Esto permite recortar elementos en formas no rectangulares (círculos, hexágonos, flechas, estrellas) sin editar las imágenes ni el marcado subyacente.

A diferencia de recortar una imagen rasterizada en un editor, clip-path es puramente visual y reversible: el elemento completo sigue en el DOM, solo es clicable dentro del recorte, y puede animarse entre formas.

Esta propiedad acepta cuatro tipos de valores:

<clip-source> — una función url() que apunta a un elemento SVG <clipPath>, para trazados completamente personalizados.
<basic-shape> — una función de forma CSS: circle(), ellipse(), inset() o polygon().
<geometry-box> — el cuadro de referencia respecto al que se mide la forma (border-box, padding-box, content-box o margin-box).
none — sin recorte; se muestra el elemento completo (valor por defecto).

clip-path reemplaza a la propiedad obsoleta clip, que solo admitía rectángulos. Utiliza clip-path en todo código nuevo: clip solo funcionaba con elementos posicionados de forma absoluta y no podía producir formas no rectangulares.

Cuándo usar clip-path

Mostrar avatares o miniaturas como círculos o hexágonos manteniendo una imagen fuente cuadrada.
Crear divisores de sección angulados o diagonales sin imágenes de fondo adicionales.
Revelar u ocultar contenido con una forma animada (ya que los valores <basic-shape> son animables).
Construir recortes decorativos, insignias y flechas a partir de un solo elemento.

Para que el texto fluya alrededor de una forma en lugar de recortar el elemento, usa shape-outside en su lugar.

Valor inicial	none
Se aplica a	Todos los elementos.
Heredable	No
Animable	Sí, si se especifica para `<basic-shape>`.
Versión	CSS Masking Module Level 1
Sintaxis DOM	object.style.clipPath = "none";

Sintaxis

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

Las funciones basic-shape

Estas cuatro funciones cubren casi todas las necesidades de recorte. Las coordenadas pueden usar cualquier longitud CSS o porcentaje; los porcentajes son relativos al cuadro de referencia.

circle(radius at cx cy) — un círculo. Ejemplo: circle(50% at 50% 50%) inscribe el mayor círculo posible centrado en el elemento.
ellipse(rx ry at cx cy) — una elipse con radios horizontal y vertical independientes.
inset(top right bottom left round <radius>) — un rectángulo desplazado desde cada borde, con la palabra clave opcional round para esquinas redondeadas.
polygon(x1 y1, x2 y2, …) — un polígono arbitrario definido por una lista de vértices en sentido horario. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) produce un rombo.

Para formas que no se pueden expresar con estas funciones, referencia un elemento SVG <clipPath>: clip-path: url(#myClip).

Ejemplo de la propiedad clip-path:

Ejemplo de la propiedad CSS clip-path con valor basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La imagen cuadrada se recorta en forma de rombo — sus esquinas quedan ocultas mientras el cuadro de diseño permanece en 200×200.

Ejemplo de la propiedad clip-path con todos los valores:

Ejemplo de la propiedad CSS clip-path con valores globales y basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Animación de clip-path

Cuando tanto el estado inicial como el final usan la misma función <basic-shape> con el mismo número de puntos, los navegadores pueden interpolar suavemente entre ellos. Esto hace posibles las revelaciones de formas y las morfosis con una transition o una animation:

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

Un polygon() solo puede animarse hacia otro polygon() con el mismo número de vértices, así que mantén el mismo conteo de puntos en ambos extremos.

Compatibilidad con navegadores y consejos

clip-path con valores <basic-shape> es compatible con todos los navegadores modernos. Las versiones antiguas requerían el prefijo -webkit-; hoy una declaración sin prefijo es suficiente para los navegadores evergreen.
El área oculta se elimina solo visualmente — sigue afectando al diseño y no es clicable, por lo que el resto de la página no se ve afectado.
Un recorte puede ocultar contornos, sombras de caja (box-shadow) y anillos de foco que queden fuera de la forma; verifica que el foco de teclado siga siendo visible.

Valores

Valor	Descripción
`<clip-source>`	La `<url>` que referencia un elemento SVG `<clipPath>`.
`<basic-shape>`	Una función de forma básica como `circle()`, `ellipse()`, `inset()` o `polygon()`. Puede combinarse con un `<geometry-box>` usando una barra (`/`).
`<geometry-box>`	Define el cuadro de referencia para la forma básica (p. ej., `border-box`, `padding-box`, `content-box`, `margin-box`).
none	No se crea ninguna trayectoria de recorte.

Nota: initial, inherit y unset son valores CSS globales y se pueden usar con cualquier propiedad.

Práctica

¿Qué hace la propiedad CSS clip-path?

Define una región de recorte que puede aplicarse a cualquier elemento HTML o SVG para controlar su porción visible.Añade color de fondo a un elemento.Ajusta el tamaño del texto dentro de un elemento.Controla la forma de la región de recorte que establece qué parte de un elemento debe mostrarse.Ajusta el margen alrededor de un elemento.