Résumé de l’utilisation de la nouvelle fonction `shape()` en CSS

• La fonction CSS shape() commence à être prise en charge par les navigateurs Chromium et WebKit
• Contrairement à path(), elle permet désormais de définir des formes complexes avec une syntaxe CSS plus lisible et des unités familières
• Lors de la création de formes complexes avec clip-path, il est possible d’implémenter cela avec une approche basée sur des commandes en anglais plutôt que sur des coordonnées SVG
• De nouvelles commandes comme line, arc et curve permettent d’écrire plus simplement des lignes, des courbes et des arcs
• shape() a encore une prise en charge limitée de l’animation, mais des changements dynamiques en réponse à hover/focus sont possibles

---

Aperçu

• La fonction CSS shape() s’utilise avec clip-path pour permettre le découpage de formes complexes dans le navigateur
• Jusqu’ici, des formes de base comme circle, ellipse ou polygon étaient possibles, mais les formes libres n’étaient possibles qu’avec path()
• Comme path() exige de saisir directement les coordonnées et commandes SVG, sa lisibilité était moindre et sa courbe d’apprentissage plus élevée

Caractéristiques de la fonction shape()

• Elle permet de composer des formes vectorielles dans un style propre à CSS
• Le point de départ est défini avec des mots-clés directionnels (from top left) ou des valeurs de coordonnées (from 0 0)
• La forme est composée d’une série de commandes. Ex. : line, vline, arc, curve, smooth

Explication des principales commandes

• line
  • Signification : trace une ligne depuis le point de départ
  • Utilisation : position relative indiquée avec le mot-clé by
  • Exemple : line by -2px 3px
• vline
  • Signification : trace une ligne verticale
  • Utilisation : position absolue avec to, position relative avec by
  • Exemple : vline to 50px
• hline
  • Signification : trace une ligne horizontale
  • Utilisation : position absolue avec to, position relative avec by
  • Exemple : hline to 95%
• arc
  • Signification : trace une courbe de forme elliptique
  • Utilisation :
    • to : point d’arrivée de l’arc
    • with : direction d’inclinaison de l’arc (horizontale/verticale)
    • of : rayon de l’ellipse à laquelle l’arc appartient (horizontal/vertical)
  • Exemple : arc to 10% 50% of 1%
• curve
  • Signification : trace une courbe de Bézier
  • Utilisation :
    • to : point d’arrivée de la courbe
    • with : points de contrôle de la courbe (ajustement de la courbure)
  • Exemple : curve to 0% 100% with 50% 0%
• smooth
  • Signification : trace une courbe lisse (courbe de Bézier connectée)
  • Utilisation :
    • to : point d’arrivée
    • by : coordonnées relatives
    • with : points de contrôle

Autres points

• shape() peut être modifiée dynamiquement dans les états hover/focus
• Dans les navigateurs actuels, les animations transition ne fonctionnent pas encore
• La fonction de calcul calc() peut aussi être utilisée

Liens de référence

• Spécification officielle