Usa shape() para el recorte responsivo

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Noam Rosenthal

Fecha de publicación: 8 de abril de 2025

La propiedad clip-path te permite cambiar la forma de un elemento recortando a un círculo, un polígono o incluso una ruta de SVG. Sin embargo, antes de Chrome 135 y Safari 18.4, debías elegir entre polígonos responsivos y formas más complejas que no son responsivas con rutas de SVG. Con la nueva función shape(), un clip-path puede recortar el elemento en una forma que no sea de polígono y que también sea responsiva.

Crea una forma de bandera

A modo de ejemplo, compara la creación de una forma de bandera con clip-path: path() y clip-path: shape().

Una forma de bandera no es exactamente un polígono, ya que sus bordes superior e inferior son curvas cúbicas de Bézier en lugar de líneas rectas o esquinas redondeadas.

Crea la marca con clip-path: path().

Una forma como esta bandera se puede representar con una ruta de SVG:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Para desglosarlo, una ruta de SVG es una serie de comandos de ruta:

1. Mueve a 0, 20.
2. Curva a 100, 20, con puntos de control (25,0 y 75, 40).
3. Línea vertical hasta 80.
4. Curva a 0, 80, con puntos de control (75,100 y 25,50).
5. Cierra la ruta (línea hasta 0,20).

Esto dibuja una forma de bandera, pero todas las unidades están en píxeles. SVG puede escalar esos píxeles a un cuadro de vista, pero de una manera que siempre se vea como una escala geométrica de toda la forma.

Por ejemplo, si deseas que todo el rectángulo se ajuste, pero mantener la altura y el ancho de las curvas en 20 px, SVG no sería la mejor opción.

Crea la marca con shape().

Compara el mismo resultado con shape(). La función de forma acepta una serie de comandos, similares a los comandos de ruta de SVG. Sin embargo, estos comandos aceptan longitudes y porcentajes de CSS, en cualquier unidad de CSS.

El siguiente CSS convierte la marca en un shape() con unidades de porcentaje:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Haz que sea responsivo

Con la gama completa de longitudes de CSS disponibles, puedes elegir cuáles usar para cada coordenada.

Por ejemplo, para que todo el tamaño de la marca se ajuste al tamaño del elemento, pero mantener la altura de la curva constante, puedes hacer lo siguiente:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Cómo agregar propiedades y animaciones personalizadas

Ahora que la forma está definida en CSS, también puedes usar propiedades personalizadas para manipular la altura fácilmente:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Incluso puedes animar la propiedad CSS con el descriptor @property y restringirla para que no se extienda:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Probar la demostración

En Chrome 135 o Safari 18.4, puedes ver la forma de bandera animada creada con clip-path: shape() en esta demostración de CodePen.

Resumen

clip-path: shape() te permite recortar tu elemento con formas arbitrarias y responsivas, lo que antes solo era posible con técnicas como gradientes cónicos o SVG creados con JavaScript.

Consulta la especificación para conocer la sintaxis completa.

Por el momento, solo funciona para clip-path. En el futuro, prevemos usar este tipo de forma para configurar la forma del borde del elemento, lo que desbloquearía aún más formas de expresión no rectangulares.