Dibujando Formas Compatibles con Layouts mediante la Función CSS xywh()

Necesitas un rectángulo recortado que escale con su contenedor. Recurres a clip-path, pero definir la forma resulta incómodo. ¿Deberías calcular valores de inserción desde cada borde? ¿Qué sucede cuando el contenedor cambia de tamaño?

La función CSS xywh() resuelve esto permitiéndote definir rectángulos de la manera intuitiva: punto de inicio más dimensiones. Ahora cuenta con soporte baseline en todos los navegadores modernos, convirtiéndola en una opción confiable para recortes responsivos listos para producción.

¿Qué es la Función CSS xywh()?

La función xywh() crea formas básicas rectangulares especificando cuatro valores: las coordenadas x e y de la esquina superior izquierda, seguidas del ancho y alto. Pertenece a la familia de formas básicas de CSS junto con inset(), circle(), ellipse() y polygon().

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

Esto recorta el elemento a un rectángulo que comienza al 10% desde la izquierda, 10% desde arriba, abarcando el 80% del ancho y el 80% del alto. Los cuatro valores aceptan cualquier unidad <length-percentage>, haciendo que el recorte responsivo sea sencillo.

Soporte de Navegadores: Listo para Producción en 2025

La función xywh() alcanzó el estatus de Baseline 2024 y funciona en:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

Esta no es tecnología experimental que requiera flags o polyfills. Las formas CSS modernas usando xywh() funcionan de manera confiable en todos los navegadores actuales que usan tus usuarios.

Sintaxis y Parámetros

La función acepta cuatro valores requeridos y una palabra clave opcional:

clip-path: xywh(x y width height round border-radius);

Valores de posición (x, y): Distancia desde los bordes izquierdo y superior de la caja de referencia.

Valores de dimensión (width, height): El tamaño del rectángulo. Estos deben ser no negativos.

Palabra clave round: Opcional. Cuando se incluye, habilita esquinas redondeadas usando la misma sintaxis que border-radius.

/* Esquinas afiladas */
clip-path: xywh(0 0 100% 100%);

/* Redondeado uniforme */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* Redondeado asimétrico */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Recorte Responsivo con Porcentajes

El verdadero poder de xywh() emerge cuando usas valores porcentuales. A diferencia de valores fijos en píxeles, los porcentajes responden automáticamente a los cambios de tamaño del contenedor.

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

Esto crea un clip-path layout responsivo que mantiene el espaciado proporcional independientemente de las dimensiones de la tarjeta. Combínalo con unidades de viewport o calc() para patrones responsivos más complejos:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() vs. inset(): Eligiendo la Función Correcta

Ambas funciones crean rectángulos, pero abordan el problema de manera diferente.

Usa inset() cuando estés definiendo márgenes desde cada borde:

/* 20px hacia adentro desde todos los bordes */
clip-path: inset(20px);

Usa xywh() cuando necesites control explícito de posición y tamaño:

/* Rectángulo en coordenadas específicas con dimensiones específicas */
clip-path: xywh(50px 50px 200px 150px);

La función xywh() brilla cuando animas formas o cuando necesitas un rectángulo que no se correlaciona directamente con los bordes del elemento. Mover una forma con inset() requiere recalcular los cuatro valores de borde. Con xywh(), solo ajustas las coordenadas x e y.

Aplicaciones Prácticas

Máscaras de imagen con padding consistente:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

Tratamientos de esquinas en tarjetas:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

Efectos de revelación animados:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

Mirando Hacia Adelante: La Función shape()

La función más reciente shape() ofrece aún más flexibilidad para trazados complejos, pero xywh() sigue siendo la herramienta correcta para formas rectangulares. Es más simple, más legible y cuenta con soporte completo hoy.

Conclusión

La función CSS xywh() proporciona una sintaxis limpia e intuitiva para recortes rectangulares que escalan naturalmente con layouts responsivos. Sus valores basados en porcentajes eliminan cálculos manuales cuando los contenedores cambian de tamaño, y la sintaxis familiar de border-radius para esquinas redondeadas mantiene tu código consistente.

Para cualquier clip-path layout que requiera rectángulos—ya sean máscaras estáticas o revelaciones animadas—xywh() es ahora la opción lista para producción en todos los navegadores modernos.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..