Usa shape() para el recorte responsivo

Noam Rosenthal

Publicado: 8 de abril de 2025

La propiedad clip-path te permite cambiar la forma de un elemento recortándolo en 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 a una forma que no sea un polígono y que también sea responsiva.

Cómo crear una forma de bandera

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

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

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

Una forma como la de esta bandera se puede representar con una ruta de acceso 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 SVG es una serie de comandos de ruta:

1. Mueve el cursor a 0, 20.
2. Curva hasta 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 a 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 visualización, pero de una manera que siempre se vería como una escala geométrica de toda la forma.

Por ejemplo, si quisieras que todo el rectángulo se ajustara, pero que las curvas mantuvieran una altura y un ancho de 20 px, SVG no sería la herramienta adecuada.

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 adaptable

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

Por ejemplo, para que el tamaño completo de la marca se ajuste según el 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
  );
}

Agrega propiedades y animaciones personalizadas

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

.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 sujetarla para que no se exceda:

@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 demostración

En Chrome 135 o Safari 18.4, puedes ver la forma de la 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, algo que antes solo era posible con técnicas como los gradientes cónicos o los SVG construidos 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 establecer la forma del borde del elemento, lo que desbloquearía aún más formas de expresión no rectangulares.