Resumen de cómo aprovechar la nueva función `shape()` de CSS

• La función CSS shape() empezó a ser compatible con los navegadores Chromium y WebKit
• A diferencia de path(), ahora permite definir formas complejas con una sintaxis y unidades más legibles en CSS
• Al crear formas complejas en clip-path, se puede implementar con un enfoque basado en comandos en inglés en lugar de coordenadas SVG
• Con nuevos comandos como line, arc y curve, es posible escribir líneas, curvas y arcos de forma concisa
• shape() todavía tiene soporte limitado para animaciones, pero sí permite cambios dinámicos en respuesta a hover/focus

---

Descripción general

• La función CSS shape() se usa junto con clip-path y permite el recorte de formas complejas en el navegador
• Antes se podían usar formas básicas como circle, ellipse y polygon, pero las formas libres solo eran posibles con path()
• Como en path() hay que introducir directamente coordenadas y comandos de SVG, su legibilidad era menor y la curva de aprendizaje más alta

Características de la función shape()

• Permite construir formas vectoriales al estilo de CSS
• El punto de inicio se define con palabras clave de dirección (from top left) o con valores de coordenadas (from 0 0)
• La forma se compone de una serie de comandos. Ej.: line, vline, arc, curve, smooth

Explicación de los comandos principales

• line
  • Significado: dibuja una línea desde el punto de inicio
  • Uso: define una posición relativa con la palabra clave by
  • Ejemplo: line by -2px 3px
• vline
  • Significado: dibuja una línea vertical
  • Uso: define una posición absoluta con to y una relativa con by
  • Ejemplo: vline to 50px
• hline
  • Significado: dibuja una línea horizontal
  • Uso: define una posición absoluta con to y una relativa con by
  • Ejemplo: hline to 95%
• arc
  • Significado: dibuja una curva elíptica
  • Uso:
    • to: punto final del arco
    • with: dirección de inclinación del arco (horizontal/vertical)
    • of: radio de la elipse a la que pertenece el arco (horizontal/vertical)
  • Ejemplo: arc to 10% 50% of 1%
• curve
  • Significado: dibuja una curva Bézier
  • Uso:
    • to: punto final de la curva
    • with: puntos de control de la curva (ajustan la curvatura)
  • Ejemplo: curve to 0% 100% with 50% 0%
• smooth
  • Significado: dibuja una curva suave (curva Bézier conectada)
  • Uso:
    • to: punto final
    • by: coordenadas relativas
    • with: punto de control

Otros puntos

• shape() puede cambiar dinámicamente en estados hover/focus
• En los navegadores actuales, las animaciones con transition no funcionan
• También se puede usar la función de cálculo calc()

Enlaces de referencia

• Especificación oficial