Créer des formes CSS créatives avec les fonctions de forme

Vous souhaitez créer une flèche décorative qui découpe votre image principale. Vous utilisez clip-path: path(), écrivez les coordonnées SVG, et cela fonctionne—jusqu’à ce que le conteneur soit redimensionné. La flèche conserve ses dimensions en pixels d’origine tandis que tout le reste s’adapte. C’est la limitation fondamentale que la fonction CSS shape() résout.

Ce que fait réellement la fonction CSS shape()

La fonction shape() est une méthode native CSS pour définir des formes complexes en utilisant des unités CSS familières comme les pourcentages, calc() et les unités de requête de conteneur. Contrairement à path(), qui emprunte la syntaxe SVG et interprète toutes les valeurs comme des pixels, shape() vous permet de construire des formes CSS adaptatives qui s’ajustent à leur élément conteneur.

Voici la différence essentielle. Avec path() :

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

Ces nombres sont des pixels fixes. Redimensionnez l’élément, et la forme conserve la même taille.

Avec 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);

Maintenant la forme s’adapte avec l’élément. Les pourcentages sont résolus par rapport aux dimensions de l’élément. Vous pouvez mélanger des valeurs fixes avec des valeurs relatives, créant des formes qui maintiennent leurs proportions ou préservent des angles spécifiques lorsque les conteneurs changent de taille.

Où fonctionne shape() : clip-path et offset-path

La fonction CSS shape() s’applique actuellement à deux propriétés avec des objectifs distincts.

CSS clip-path shape() définit quelles portions d’un élément restent visibles. Tout ce qui se trouve en dehors de la forme est découpé. C’est purement visuel—le modèle de boîte de l’élément reste rectangulaire, et les calculs de mise en page ignorent entièrement le découpage.

CSS offset-path shape() définit un chemin de mouvement pour les animations. Combiné avec offset-distance, vous pouvez déplacer des éléments le long de courbes et de lignes personnalisées. La forme décrit la trajectoire, pas la visibilité.

Ces propriétés sont fondamentalement différentes de shape-outside, qui affecte le flux de texte autour des éléments flottants. Cette propriété appartient à CSS Shapes Level 1 et ne prend actuellement pas en charge la fonction shape()—uniquement les formes de base comme circle(), ellipse() et polygon().

Compatibilité navigateur : la réalité fin 2025

La fonction shape() a été implémentée dans Safari 18.4 et est disponible dans les navigateurs basés sur Chromium. Firefox ne la prend pas encore en charge. Cela signifie que vous ne pouvez pas la considérer comme du CSS de base.

La détection de fonctionnalité est simple :

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

Pour une utilisation en production, l’amélioration progressive est essentielle. Commencez avec une solution de repli polygon() qui approxime votre forme sans courbes, puis ajoutez la version shape() pour les navigateurs 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 seconde déclaration écrase la première uniquement dans les navigateurs qui la comprennent.

Cas d’usage créatifs à explorer

Le découpage décoratif devient plus pratique lorsque les formes répondent à la mise en page. Un séparateur de section diagonal peut maintenir son angle quelle que soit la largeur de la fenêtre d’affichage. Un coin de carte cranté peut rester proportionnel lorsque les tailles de cartes changent dans une grille.

Les masques adaptatifs pour les images bénéficient du mélange d’unités. Conservez une découpe courbe à un rayon fixe tandis que la forme globale s’adapte avec le conteneur d’image.

Les chemins de mouvement gagnent en flexibilité lorsque vous pouvez exprimer les points de passage en pourcentages. Un élément peut orbiter autour du centre d’un conteneur quelle que soit la dimension réelle de ce conteneur.

La véritable puissance émerge lorsque vous combinez shape() avec les propriétés personnalisées CSS et les unités de requête de conteneur. Une seule définition de forme peut s’adapter à plusieurs contextes sans recalcul JavaScript.

Conclusion

La fonction CSS shape() résout un problème spécifique : rendre les chemins de découpe complexes et les chemins de mouvement adaptatifs sans quitter CSS. Elle utilise une syntaxe native, prend en charge calc() et fonctionne avec des coordonnées basées sur des pourcentages.

Elle ne remplace pas path() pour les formes à dimensions fixes où la précision en pixels est importante. Elle ne fonctionne pas avec shape-outside pour l’habillage de texte. Et elle nécessite des solutions de repli jusqu’à l’arrivée de la prise en charge par Firefox.

Pour les effets visuels créatifs qui doivent s’adapter, shape() est l’outil qui manquait. Utilisez-la avec des stratégies de repli claires, et votre découpage décoratif se comportera enfin comme le reste de votre mise en page adaptative.

FAQ

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