CSS Shapes Module Level 2 : Maîtriser la fonction shape() pour des tracés fluides

Le design web moderne cherche constamment à s’affranchir de la rigidité des boîtes rectangulaires. Pendant longtemps, l’intégration de formes géométriques complexes ou de courbes organiques nécessitait soit l’utilisation d’images vectorielles SVG externes, soit des calculs mathématiques lourds appliqués à des polygones.

Avec l’arrivée du CSS Shapes Module Level 2, une nouvelle fonctionnalité native vient changer la donne : la fonction shape(). Elle permet de dessiner des tracés complexes et fluides directement dans vos feuilles de style. Dans ce guide complet, nous allons explorer le fonctionnement technique de cette fonction, ses commandes et ses avantages par rapport aux anciennes méthodes.

#Pourquoi les anciennes méthodes posaient problème ?

Avant l’introduction de shape(), les développeurs disposaient principalement de deux outils pour créer des formes personnalisées à l’aide de la propriété clip-path :

1. La fonction polygon() : Très efficace pour les formes géométriques à base de lignes droites (triangles,
2. losanges, étoiles). Cependant, dès qu’une courbe était nécessaire, il fallait multiplier les points d’ancrage, ce qui
3. rendait le code illisible et difficile à maintenir.
4. La fonction path() : Elle permet d’utiliser la syntaxe des tracés SVG (comme d="M 10,10 L 20,20 ..."). Son
5. principal défaut réside dans sa rigidité. La fonction path() n’accepte que des valeurs absolues en pixels. Si votre
6. conteneur change de taille, le tracé reste figé, ce qui casse l’aspect adaptatif (responsif) de l’interface.

La fonction shape() résout ce problème en combinant la puissance de dessin vectoriel de la syntaxe SVG avec la souplesse des unités de mesure CSS (pourcentages, em, rem, ou fonctions mathématiques de calcul).

#Qu’est-ce que la fonction shape() ?

La fonction shape() est une valeur CSS qui s’applique principalement aux propriétés clip-path (pour rogner un élément) et offset-path (pour animer un élément le long d’un tracé précis).

Son écriture repose sur un point de départ défini, suivi d’une série de commandes de dessin très similaires à celles que l’on retrouve dans l’élément <path> du format SVG. La grande différence est que chaque coordonnée peut utiliser des expressions fluides.

La structure de base d’un tracé shape()

Pour comprendre comment dessiner avec cette fonction, imaginez que vous tenez un crayon virtuel au-dessus d’une feuille de papier :

• Le point de départ (from) : Vous posez votre crayon sur la feuille à des coordonnées précises.
• Les commandes de mouvement (move, line, curve, arc) : Vous déplacez votre crayon pour tracer des segments
• droits, des courbes ou des arcs de cercle.
• La fermeture (close) : Vous tracez une dernière ligne droite pour relier votre position actuelle au point de
• départ initial.

#Les commandes de dessin expliquées simplement

Le tableau ci-dessous résume les principales commandes disponibles au sein de la fonction shape() :

Note sur la différence entre “to” et “by” : L’instruction to utilise des coordonnées absolues par rapport à l’origine du conteneur (le coin supérieur gauche à 0,0). L’instruction by utilise des coordonnées relatives à la position actuelle de votre crayon virtuel.

#Un outil pour dessiner vos formes en direct

Il n’est pas toujours facile de concevoir un tracé géométrique uniquement à l’aide de lignes de code.

Pour vous aider, vous pouvez utiliser cet outil interactif gratuit : shape.lionel-peramo.com.

Cet outil vous permet de dessiner vos formes visuellement sur votre écran. Il génère ensuite automatiquement le code CSS correspondant, prêt à être copié dans votre feuille de style.

#Cas pratique 1 : Créer une bulle de dialogue responsive

Pour illustrer la simplicité d’écriture et la fluidité de cette nouvelle spécification, créons une bulle de dialogue adaptative. La forme doit s’adapter automatiquement aux dimensions du texte qu’elle contient.

Copier.speech-bubble
{
  width: clamp(15rem, 45vw, 35rem);
  height: clamp(10rem, 30vh, 22rem);
  background-color: oklch(25% .01 250);
  color: oklch(98% .005 250);
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% min(80%, 18rem),
    line to min(60%, 20rem) min(80%, 18rem),
    line to min(50%, 17rem) 100%,
    line to min(40%, 14rem) min(80%, 18rem),
    line to 0% min(80%, 18rem),
    close
  );
}

Décryptage du tracé de la bulle

1. from 0% 0% : Le crayon commence dans le coin supérieur gauche.
2. line to 100% 0% : On trace une ligne horizontale jusqu’au coin supérieur droit.
3. line to 100% min(80%, 18rem) : On descend le long du bord droit. La hauteur de la bulle (hors flèche)
4. s’arrêtera à 80 % de la hauteur totale de l’élément, sans dépasser 18rem.
5. line to min(60%, 20rem) min(80%, 18rem) : On commence à dessiner la flèche du bas en allant vers le centre.
6. line to min(50%, 17rem) 100% : On descend jusqu’au point le plus bas de notre flèche (à 100 % de la hauteur du
7. conteneur).
8. line to min(40%, 14rem) min(80%, 18rem) : On remonte vers le corps de la bulle.
9. line to 0% min(80%, 18rem) : On termine la ligne horizontale inférieure vers le bord gauche.
10. close : Le navigateur trace automatiquement le segment vertical gauche restant pour fermer la forme.

Grâce aux fonctions mathématiques min() et clamp(), la structure s’ajuste parfaitement sans qu’aucune requête média (@media) ne soit nécessaire pour réorganiser la géométrie de la boîte.

#Cas pratique 2 : Une bannière avec une bordure inférieure incurvée

Voyons maintenant comment introduire des courbes dynamiques avec la commande curve to. Nous voulons créer une section d’en-tête (Hero Banner) dont le bas présente une ondulation douce et esthétique.

Copier.hero-banner:not(.is-minimal)
{
  width: 100%;
  height: clamp(20rem, 50vh, 45rem);
  background-image: url('banner-image.avif');
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% min(90%, 40rem),
    curve to 0% min(90%, 40rem) with 50% 100%,
    close
  );
}

Comment fonctionne la courbe ici ?

La commande curve to 0% min(90%, 40rem) with 50% 100% indique au navigateur :

• De déplacer le tracé depuis le point actuel (le coin inférieur droit) vers le coin inférieur gauche
• (0% min(90%, 40rem)).
• D’utiliser un point de contrôle situé au centre tout en bas de l’élément (50% 100%). Ce point de contrôle agit comme
• un aimant virtuel qui attire le tracé vers le bas, créant ainsi une courbe symétrique et harmonieuse.

#Performances et bénéfices SEO

L’intégration de la fonction shape() apporte des gains importants au niveau de l’architecture technique et de la visibilité de vos pages web.

Des performances matérielles optimales

La propriété clip-path appliquée avec des fonctions CSS natives comme shape() est directement gérée par le processeur graphique (GPU) de l’appareil de l’utilisateur. Contrairement aux solutions alternatives utilisant du JavaScript pour recalculer la position de balises SVG lors du redimensionnement de la fenêtre, shape() s’exécute de manière quasi instantanée.

Cette optimisation permet de réduire le temps de calcul du fil d’exécution principal (main thread) du navigateur, améliorant de manière mesurable vos indicateurs de performance clés (Core Web Vitals) :

• CLS (Cumulative Layout Shift) : Aucun déplacement inattendu du contenu lors du chargement de la page.
• LCP (Largest Contentful Paint) : Le rendu visuel de vos plus grands blocs graphiques s’affiche plus rapidement.

Un impact indirect mais fort sur le SEO

Les moteurs de recherche valorisent l’expérience utilisateur et la vitesse de chargement. Un site web qui répond rapidement et de manière stable sur mobile et bureau bénéficie d’un meilleur positionnement dans les résultats de recherche.

De plus, en éliminant les fichiers SVG externes superflus ou les scripts JS d’ajustement géométrique, vous réduisez le poids total de vos pages, facilitant ainsi l’exploration (crawl) de votre site par les robots des moteurs de recherche.

#Est-ce que tous les navigateurs acceptent cette fonction ?

La fonction shape() fonctionne sur tous les navigateurs Internet récents. C’est un standard officiel depuis l’année 2026.

Voici la liste des versions compatibles :

• Chrome et Edge : à partir de la version 135.
• Safari : à partir de la version 18.4.
• Firefox : à partir de la version 148.

Comment aider les vieux ordinateurs ?

Certains utilisateurs ont de vieux ordinateurs. Pour ces personnes, vous devez proposer une solution de secours. En informatique, nous appelons cela un fallback.

Voici comment faire en CSS :

1. Vous donnez une forme simple avec la commande polygon(). Tous les navigateurs la comprennent.
2. Vous utilisez la règle @supports pour poser une question au navigateur.
3. Si le navigateur comprend la fonction shape(), il applique la forme fluide à la place de la forme simple.

Copier.card-shape
{
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0% 80%);
}

@supports (clip-path: shape(from 0px 0px, line to 0px 0px))
{
  .card-shape
  {
    clip-path: shape(
      from 0% 0%,
      line to 100% 0%,
      line to 100% min(80%, 18rem),
      line to min(60%, 20rem) min(80%, 18rem),
      line to min(50%, 17rem) 100%,
      line to min(40%, 14rem) min(80%, 18rem),
      line to 0% min(80%, 18rem),
      close
    );
  }
}

Grâce à ce code, tous les utilisateurs peuvent visiter votre site sans aucun problème d’affichage.

#Ce qu’il faut retenir

La fonction shape() change notre façon de coder les sites internet.

Voici ses 3 grands avantages :

• Elle est fluide : la forme s’adapte à la taille de l’écran sans code supplémentaire.
• Elle est rapide : le navigateur dessine la forme directement. Votre site s’affiche plus vite.
• Elle est moderne : combinée avec l’espace de couleur OKLCH, elle vous aide à créer des designs plus propres et plus accessibles.

Essayez d’utiliser la fonction shape() dans votre prochain projet pour créer des interfaces uniques et légères.

Questions Fréquentes (FAQ)

Lionel Péramo

Expert Performance Web & Écoconception

Développeur full stack et créateur du framework OTRA (PHP) et de la librairie EcoComposer. J'écris pour rendre le web plus rapide et inclusif.

En savoir plus →