Générateur de clip-path

Comment utiliser le générateur de clip-path

1. Choisissez une Forme : Polygone, Cercle, Ellipse ou Rectangle (inset). La couche pâle montre l’élément entier, la couche vive ce qui reste visible après la découpe.
2. Faites glisser les points dans l’éditeur. Pour un polygone, chaque point est un sommet ; cliquez n’importe où dans la zone pour ajouter un point sur le bord le plus proche. Pour un cercle ou une ellipse, déplacez le centre et les points de rayon. Pour un inset, déplacez les quatre points des bords.
3. Affinez dans les champs du dessous : la liste Points (X et Y en pourcentage, avec Supprimer et Ajouter un point) pour les polygones, ou les champs Rayon, Centre X, Centre Y, Haut, Droite, Bas, Gauche et Coins arrondis (px) pour les autres formes.
4. Gagnez du temps avec les Préréglages : triangle, trapèze, parallélogramme, losange, pentagone, hexagone, octogone, biseau, étoile, croix, flèches, chevron, bulle de dialogue, cercle, ellipse et inset.
5. Cochez Aimanter à 5 % pour obtenir des valeurs rondes, et Ajouter -webkit-clip-path (ancien Safari) si vous visez encore Safari 13.0 ou plus ancien.
6. Si vous le souhaitez, déposez une photo dans Image de fond (facultatif) pour voir la forme sur votre propre image. Le fichier n’est jamais envoyé.
7. Copiez le Code CSS avec Copier.

Au clavier : sélectionnez un point, déplacez-le avec les flèches (1 %, ou 10 % avec Maj) et appuyez sur Suppr pour retirer un sommet du polygone. Un polygone garde au moins trois points.

Les fonctions de forme de clip-path

clip-path masque tout ce qui se trouve hors d’une forme. L’élément garde sa taille dans la mise en page : seuls l’affichage et la zone cliquable sont découpés.

• polygon(x1 y1, x2 y2, …) relie les points dans l’ordre et referme la forme. polygon(50% 0%, 100% 100%, 0% 100%) est un triangle pointe en haut. Les coordonnées partent du coin supérieur gauche de l’élément.
• circle(r at cx cy) : circle(50% at 50% 50%) est le plus grand cercle centré dans l’élément. Un rayon en pourcentage se rapporte à la diagonale de l’élément divisée par √2 ; il ne correspond à une part de la largeur que pour un élément carré.
• ellipse(rx ry at cx cy) : le rayon horizontal est une part de la largeur, le rayon vertical une part de la hauteur.
• inset(haut droite bas gauche round rayon) découpe un rectangle à l’intérieur des bords, avec la même notation raccourcie à une, deux, trois ou quatre valeurs que les marges, et des coins arrondis en option.

L’outil écrit des pourcentages : la forme suit donc la taille de l’élément.

Conseils pour de belles formes

• L’ordre des sommets compte : faites le tour dans un seul sens pour éviter les formes croisées en « nœud papillon ».
• Deux formes ayant le même nombre de points peuvent s’animer : transition: clip-path 0.4s transforme un hexagone en un autre en douceur. Le navigateur ne sait pas interpoler entre des polygones de tailles différentes.
• clip-path découpe aussi box-shadow et les bordures. Pour ombrer une forme découpée, placez filter: drop-shadow() sur un élément parent.
• Les zones masquées ne reçoivent ni clic ni survol, ce qui est pratique pour des boutons de forme irrégulière.