Creatividad con las Funciones de Forma CSS

Dec 20, 2025 · 4 min read

Creatividad con las Funciones de Forma CSS

Quieres una flecha decorativa que recorte tu imagen hero. Recurres a clip-path: path(), escribes las coordenadas SVG y funciona—hasta que el contenedor cambia de tamaño. La flecha permanece fija en sus dimensiones originales en píxeles mientras todo lo demás se escala. Esta es la limitación principal que resuelve la función CSS shape().

Puntos Clave

La función CSS shape() crea trazados de recorte responsivos usando unidades CSS nativas como porcentajes y calc(), a diferencia de path() que usa valores fijos en píxeles
shape() funciona con clip-path para recorte visual y offset-path para animaciones de movimiento, pero no con shape-outside para ajuste de texto
El soporte de navegadores incluye Safari 18.4+ y navegadores basados en Chromium, pero Firefox carece de soporte—siempre usa fallbacks de polygon() para producción
Combina shape() con propiedades personalizadas CSS y unidades de consulta de contenedor para formas que se adaptan a múltiples contextos sin JavaScript

Qué Hace Realmente la Función CSS shape()

La función shape() es una forma nativa de CSS para definir formas complejas usando unidades CSS familiares como porcentajes, calc() y unidades de consulta de contenedor. A diferencia de path(), que toma prestada la sintaxis SVG e interpreta todos los valores como píxeles, shape() te permite construir formas CSS responsivas que se adaptan a su elemento contenedor.

Esta es la diferencia clave. Con path():

clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 z");

Esos números son píxeles fijos. Cambia el tamaño del elemento y la forma mantiene el mismo tamaño.

Con shape():

clip-path: shape(from 0% 0%, 
  line to calc(100% - 50px) 0%, 
  line to 100% 50%, 
  line to calc(100% - 50px) 100%, 
  line to 0% 100%, 
  close);

Ahora la forma se escala con el elemento. Los porcentajes se resuelven contra las dimensiones del elemento. Puedes mezclar valores fijos con relativos, creando formas que mantienen proporciones o preservan ángulos específicos a medida que los contenedores cambian de tamaño.

Dónde Funciona shape(): clip-path y offset-path

La función CSS shape() actualmente se aplica a dos propiedades con propósitos distintos.

CSS clip-path shape() define qué porciones de un elemento permanecen visibles. Todo lo que está fuera de la forma se recorta. Esto es puramente visual—el modelo de caja del elemento permanece rectangular, y los cálculos de diseño ignoran el recorte por completo.

CSS offset-path shape() define un trazado de movimiento para animaciones. Combinado con offset-distance, puedes mover elementos a lo largo de curvas y líneas personalizadas. La forma describe la trayectoria, no la visibilidad.

Estas son fundamentalmente diferentes de shape-outside, que afecta el flujo de texto alrededor de elementos flotantes. Esa propiedad pertenece a CSS Shapes Level 1 y actualmente no soporta la función shape()—solo formas básicas como circle(), ellipse() y polygon().

Soporte de Navegadores: La Realidad a Finales de 2025

La función shape() se implementó en Safari 18.4 y ha llegado a navegadores basados en Chromium. Firefox aún no la soporta. Esto significa que no puedes tratarla como CSS base.

La detección de características es directa:

@supports (clip-path: shape(from 0% 0%, line to 100% 0%)) {
  /* shape() soportado */
}

Para uso en producción, la mejora progresiva es esencial. Comienza con un fallback de polygon() que aproxime tu forma sin curvas, luego añade la versión shape() para navegadores compatibles:

.element {
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  clip-path: shape(from 0% 0%, 
    line to 80% 0%, 
    line to 100% 50%, 
    line to 80% 100%, 
    line to 0% 100%, 
    close);
}

La segunda declaración sobrescribe la primera solo en navegadores que la entienden.

Casos de Uso Creativos que Vale la Pena Explorar

Recorte decorativo se vuelve más práctico cuando las formas responden al diseño. Un divisor de sección diagonal puede mantener su ángulo independientemente del ancho del viewport. Una esquina con muesca en una tarjeta puede permanecer proporcional a medida que los tamaños de las tarjetas cambian en una cuadrícula.

Máscaras responsivas para imágenes se benefician de mezclar unidades. Mantén un recorte curvo con un radio fijo mientras la forma general se escala con el contenedor de la imagen.

Trazados de movimiento ganan flexibilidad cuando puedes expresar puntos de referencia en porcentajes. Un elemento puede orbitar el centro de un contenedor independientemente de las dimensiones reales de ese contenedor.

El verdadero poder emerge cuando combinas shape() con propiedades personalizadas CSS y unidades de consulta de contenedor. Una sola definición de forma puede adaptarse a múltiples contextos sin recálculo de JavaScript.

Conclusión

La función CSS shape() resuelve un problema específico: hacer que trazados de recorte complejos y trazados de movimiento sean responsivos sin salir de CSS. Usa sintaxis nativa, soporta calc() y funciona con coordenadas basadas en porcentajes.

No reemplaza a path() para formas de dimensiones fijas donde la precisión en píxeles importa. No funciona con shape-outside para ajuste de texto. Y requiere fallbacks hasta que llegue el soporte de Firefox.

Para efectos visuales creativos que necesitan escalar, shape() es la herramienta que faltaba. Úsala con estrategias de fallback claras, y tu recorte decorativo finalmente se comportará como el resto de tu diseño responsivo.

Preguntas Frecuentes

Sí, puedes animar entre valores de shape() si ambas formas tienen el mismo número y tipo de comandos. El navegador interpola entre los valores de coordenadas correspondientes. Si las estructuras de comandos difieren, la animación no funcionará suavemente y puede saltar entre estados en lugar de transicionar.

polygon() solo soporta líneas rectas entre puntos y usa una sintaxis más simple. shape() soporta curvas a través de comandos arc y curve, permite expresiones calc() dentro de las coordenadas, y proporciona más control sobre formas complejas. Usa polygon() para formas angulares simples y como fallbacks para un soporte de navegador más amplio.

No. La función shape() con clip-path es puramente visual. La caja delimitadora rectangular del elemento permanece sin cambios para eventos de puntero, contornos de enfoque y cálculos del árbol de accesibilidad. Los usuarios aún pueden hacer clic en áreas visualmente recortadas, lo que puede requerir manejo adicional para interacciones intuitivas.

Sí, las propiedades personalizadas CSS funcionan dentro de las coordenadas de shape(). Puedes definir variables para valores repetidos o crear formas configurables. Combínalas con calc() para ajustes dinámicos. Esto hace que las definiciones de formas sean reutilizables y más fáciles de mantener en diferentes componentes o puntos de interrupción responsivos.

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..