Choisissez une forme, déplacez les points ou saisissez leurs pourcentages X et Y, puis copiez le clip-path obtenu. L’aperçu applique les mêmes déclarations.
Fonctionne localement dans votre navigateurL’éditeur travaille sur une seule forme polygon() et écrit les deux déclarations dont une feuille de style a besoin : la ligne préfixée -webkit-clip-path et la ligne standard clip-path. Cinq formes prédéfinies couvrent les cas courants — Triangle à 3 points, Losange à 4, Hexagone à 6 (la forme par défaut), Étoile à 10 et Chevron à 6 — et chaque point se déplace en faisant glisser sa poignée sur le plan ou en saisissant un pourcentage X et Y.
Le plan est un aperçu réel de ce même CSS : le polygone est appliqué à l’élément pendant le glissement et le compteur de l’en-tête indique le nombre de points. Les coordonnées sont des pourcentages de la boîte de l’élément, la forme garde donc ses proportions lorsqu’elle est appliquée à un élément d’une autre taille.
Le bloc contient une seule règle : .clipped-element avec une ligne -webkit-clip-path et une ligne clip-path, toutes deux portant la même valeur polygon() formée de paires de pourcentages x y séparées par des virgules. Rien d’autre n’est écrit : aucun préfixe en dehors de -webkit-, aucune variable CSS et aucun sélecteur pour votre balisage, remplacez donc .clipped-element par la classe que vous utilisez réellement.
Les paires sont des pourcentages de la boîte de référence, soit la boîte de bordure pour un élément qui ne la redéfinit pas. La forme suit donc la taille de l’élément et ne dépend pas de la taille en pixels du plan d’aperçu.
L’aperçu montre ce que votre navigateur fait de la valeur ; la page ne propose ni table de compatibilité ni détection. Le découpage polygonal de base fonctionne sur les Chrome, Edge, Firefox et Safari actuels et la ligne -webkit- maintient les anciens Safari et iOS, mais vérifiez les moteurs de votre public avant de donner un sens à la forme : un navigateur sans prise en charge peint toute la boîte.
Le découpage n’est pas seulement visuel : un clic en dehors du polygone n’atteint pas l’élément, ce qui compte lorsque la forme découpée est un lien ou un bouton dont la zone cliquable doit correspondre à l’écran.
Un polygone exige trois points et en accepte douze. Ajouter un point coupe l’arête après le point actif, Supprimer le point efface l’actif et la ligne d’état annonce les deux limites dans la langue de la page. La liste Point actif suit l’ordre de création, qui est aussi l’ordre des paires dans polygon().
Tout s’exécute dans la page : la forme est calculée par le navigateur, aucune valeur n’est envoyée et l’outil continue de fonctionner hors connexion. L’élément d’aperçu reçoit la déclaration affichée dans le panneau de code : aucune seconde implémentation ne peut donc contredire le CSS copié.