path(), shape() y las formas de coordenadas

Las formas básicas cubren el noventa por ciento de los casos y dejan fuera todo lo que tenga una curva que no sea un arco de circunferencia. Para eso está path(), que mete datos de ruta SVG dentro de CSS con una limitación que lo estropea casi todo, y shape(), que existe precisamente para arreglar esa limitación y todavía no está en todas partes.

path() y sus coordenadas absolutas

path() acepta una cadena con la misma sintaxis del atributo d de un <path> de SVG:

.gota {
  clip-path: path("M 100 0 C 155 0 200 45 200 100 C 200 155 155 200 100 200 C 45 200 0 155 0 100 C 0 45 45 0 100 0 Z");
}

Los comandos son los de siempre: M para mover, L para línea, C y S para curvas cúbicas, Q y T para cuadráticas, A para arcos elípticos, Z para cerrar. En minúscula, las mismas órdenes en coordenadas relativas.

Y aquí está el problema que decide cuándo se puede usar: las coordenadas de path() son píxeles absolutos. No hay porcentajes, no hay unidades, no hay calc(). La ruta del ejemplo dibuja una forma de 200 por 200 píxeles, y la dibujará igual en un elemento de 200 píxeles y en uno de 800: en el segundo recortará solo la esquina superior izquierda.

Eso convierte a path() en una herramienta para elementos de tamaño fijo y poco más. Cualquier componente que se adapte al contenido o al viewport queda fuera.

Hay un caso donde sí es la respuesta correcta, y es cuando la forma la genera una herramienta de diseño y el elemento tiene tamaño conocido: un icono, un sello, un separador decorativo de altura fija.

path() acepta también la regla de relleno delante de la cadena:

.anillo { clip-path: path(evenodd, "M 0 0 H 200 V 200 H 0 Z M 50 50 H 150 V 150 H 50 Z"); }

Dos subrutas, la exterior y la interior, con evenodd produciendo el agujero. Es la forma de recortar un anillo o un marco, cosa que ninguna forma básica permite.

rect() y xywh()

Dos funciones que hacen lo mismo que inset() con un sistema de coordenadas distinto, y que resultan mucho más naturales cuando la forma viene de un cálculo.

/* Desde los bordes superior, derecho, inferior e izquierdo. */
.a { clip-path: rect(10px 90% 90% 10px round 8px); }

/* Desde la esquina superior izquierda, con ancho y alto. */
.b { clip-path: xywh(10px 10px 200px 120px round 8px); }

inset() mide desde los cuatro bordes hacia dentro, que es cómodo para márgenes y espantoso para colocar un rectángulo en una posición conocida: el valor derecho e inferior hay que calcularlos como el total menos lo que quieres. rect() mide las cuatro aristas desde los bordes superior e izquierdo, y xywh() da origen y tamaño, que es como piensa cualquiera que venga de un canvas o de un sistema de coordenadas.

Las dos aceptan auto en cualquier posición, con el significado de “el borde de la caja de referencia”, y las dos admiten round.

Son recientes, así que conviene protegerlas:

.recorte {
  clip-path: inset(10px calc(100% - 210px) calc(100% - 130px) 10px round 8px);
}

@supports (clip-path: xywh(0 0 1px 1px)) {
  .recorte { clip-path: xywh(10px 10px 200px 120px round 8px); }
}

shape() y lo que arregla

shape() es la respuesta de la especificación al problema de path(). Describe la misma clase de geometría —líneas, curvas, arcos— pero con la sintaxis y las unidades de CSS, lo cual significa porcentajes, calc(), custom properties y todo lo demás.

.hoja {
  clip-path: shape(
    from 0% 0%,
    curve to 100% 100% with 100% 0%,
    curve to 0% 0% with 0% 100%
  );
}

Los comandos son move, line, hline, vline, curve to ... with ... para curvas de Bézier, smooth, arc, y close. Cada coordenada es un par de valores de CSS, con lo que una forma puede depender del tamaño del elemento, de una custom property o de una consulta de contenedor.

La segunda ventaja es la animación. Dos shape() con la misma lista de comandos se interpolan, y como los valores son de CSS se pueden interpolar contra porcentajes distintos. Con path() eso no existe.

El soporte no es universal: llegó a los motores basados en Chromium y a Safari durante 2025, y no está en los cuatro. Escríbelo siempre detrás de una comprobación:

.hoja {
  clip-path: ellipse(50% 50%);
}

@supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {
  .hoja {
    clip-path: shape(
      from 0% 0%,
      curve to 100% 100% with 100% 0%,
      curve to 0% 0% with 0% 100%
    );
  }
}

Un @supports con una forma mínima pero sintácticamente completa es la comprobación correcta: si el navegador no entiende la función, la consulta falla y se queda el ellipse().