Générateur de clip-path CSS

Créez visuellement des formes CSS clip-path. Choisissez une forme prédéfinie ou déplacez des points pour bâtir un polygone sur mesure, prévisualisez-le en direct et copiez le CSS.

Faites glisser n'importe quel point de la forme pour la remodeler.

.clipped { clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }

Noter Générateur de clip-path CSS

Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.

Comment fonctionne Générateur de clip-path CSS

Cet outil construit une valeur clip-path comme vous esquisseriez une forme sur papier : en plaçant des points et en les ajustant jusqu'à ce que le contour soit juste. Choisissez un préréglage dans la grille de formes, comme un hexagone, une étoile ou une bulle de message, et l'aperçu découpe aussitôt la boîte d'exemple selon ce contour grâce à la propriété CSS clip-path. En coulisses, chaque préréglage est stocké sous forme de liste de paires de coordonnées en pourcentages, de sorte que la forme s'adapte correctement quelle que soit la taille de l'élément final.

Chaque forme polygonale vous permet de faire glisser n'importe quel point directement sur l'aperçu. Chaque déplacement recalcule la position du point en pourcentage de la largeur et de la hauteur de la boîte, puis reconstruit la fonction polygon() avec les nouvelles coordonnées. Comme clip-path ne fait que masquer des parties d'un élément sans le redimensionner, l'arrière-plan sous-jacent reste en place pendant que la zone visible change de forme ; c'est pourquoi l'aperçu permet de passer d'un fond clair à un fond sombre ou en dégradé afin de vérifier le rendu des bords et du contraste sur un contenu réel.

Le CSS généré est une seule déclaration que vous pouvez coller sur n'importe quel élément ayant une largeur et une hauteur définies. Les navigateurs modernes prennent en charge clip-path nativement : aucun JavaScript n'est donc nécessaire sur votre site, seulement la règle copiée. Tout s'exécute dans votre navigateur avec de simples calculs ; rien de ce que vous créez ici n'est importé ni stocké.

Comment utiliser Générateur de clip-path CSS

1

Choisissez une forme

Choisissez un préréglage comme le cercle, l'hexagone, l'étoile ou la flèche, ou partez d'un polygone personnalisé.

2

Faites glisser les points

Affinez la forme en faisant glisser ses points d'angle directement sur l'aperçu.

3

Copiez le CSS

Récupérez la règle clip-path terminée et collez-la dans votre feuille de style.

Questions fréquentes

Quelle est la différence entre clip-path et l'ancienne propriété mask-image ?
clip-path affiche ou masque des parties d'un élément avec une forme à bords nets comme un polygone, un cercle ou une ellipse. mask-image peut utiliser un dégradé ou le canal alpha d'une image pour faire apparaître ou disparaître progressivement des zones : elle gère donc les bords doux et les dégradés de transparence que clip-path ne peut pas produire. Pour une découpe géométrique nette comme les formes de cet outil, clip-path est le choix le plus simple et le mieux pris en charge.
Pourquoi mon clip-path n'a-t-il aucun effet sur l'élément ?
La cause la plus fréquente est que l'élément n'a ni largeur ni hauteur définies : la forme n'a alors rien de visible à révéler au-delà de la taille naturelle du contenu. Par défaut, clip-path ne fait rien non plus sur les éléments en ligne ; définissez d'abord l'élément en block, inline-block ou flex. Vérifiez aussi qu'il n'y a pas de faute de frappe dans la syntaxe polygon(), car un signe pourcentage ou une virgule manquant casse silencieusement la valeur dans la plupart des navigateurs.
Puis-je appliquer clip-path à une image d'arrière-plan plutôt qu'à une vraie balise img ?
Oui. clip-path fonctionne sur n'importe quel élément : vous pouvez donc l'appliquer à une div avec une background-image, une background-color ou un dégradé, pas seulement à un élément img. C'est d'ailleurs l'option la plus sûre pour les designs responsives, car une img découpée peut sembler déformée si son rapport d'aspect ne correspond pas à celui du conteneur.
Puis-je animer ou faire une transition entre deux formes clip-path ?
Oui, mais de façon fluide seulement si les deux formes utilisent la même fonction clip-path et, pour polygon(), le même nombre de points dans le même ordre. Une transition d'un hexagone à 6 points vers une étoile à 10 points sautera au lieu de se transformer en douceur : ajoutez donc des points en double à la forme la plus simple jusqu'à ce que les deux polygones aient le même nombre de points.
clip-path modifie-t-il la zone réellement cliquable d'un élément ?
Dans la plupart des navigateurs modernes, oui. Les clics en dehors de la forme visible passent à travers vers ce qui se trouve derrière l'élément, et les clics à l'intérieur de la forme sont toujours reçus par celui-ci. C'est différent d'un simple masquage par overflow, où la boîte rectangulaire entière reste cliquable, même dans les parties masquées.
Quels navigateurs prennent en charge la propriété CSS clip-path ?
Toutes les versions actuelles de Chrome, Firefox, Safari et Edge prennent en charge clip-path avec les valeurs polygon(), circle(), ellipse() et inset(). La prise en charge est solide depuis 2017 environ ; le seul vrai risque concerne donc les très anciennes versions de navigateurs, rares dans le trafic actuel.
Comment rendre la forme responsive pour qu'elle reste correcte sur mobile ?
Comme chaque point de cet outil est stocké en pourcentage plutôt qu'en valeur fixe en pixels, la forme s'adapte automatiquement à la largeur et à la hauteur de l'élément. Aucune media query supplémentaire n'est nécessaire pour la forme elle-même ; veillez simplement à ce que l'élément conteneur se redimensionne comme vous le souhaitez selon les points de rupture.
Puis-je importer un tracé SVG au lieu d'utiliser des points de polygone ?
clip-path accepte aussi un élément SVG clipPath référencé par URL, qui prend en charge des courbes que les polygones à lignes droites ne peuvent pas produire. Cet outil se concentre sur les fonctions polygon(), circle() et ellipse(), car elles n'exigent aucun balisage SVG séparé et couvrent la grande majorité des formes courantes.
Une forme clip-path complexe ralentit-elle les performances de la page ?
Non, pas de façon perceptible. Les navigateurs rendent clip-path sur la couche de composition GPU : même un polygone d'une douzaine de points a donc un coût négligeable comparé à de grandes box-shadow ou à des filtres d'arrière-plan.
Cet outil enregistre-t-il ou importe-t-il les formes que je crée ?
Non. Chaque point, chaque déplacement et chaque calcul de forme s'effectue localement dans votre navigateur avec JavaScript. Rien n'est envoyé à un serveur ni stocké nulle part, sauf si vous copiez vous-même le CSS.

Outils associés

Essayer

Formateur CSS

Formatez votre code CSS pour une meilleure lisibilité.

Essayer

Générateur de dégradé

Générez un dégradé à partir de deux couleurs.

Essayer

Générateur de box-shadow CSS

Concevez des ombres CSS box-shadow personnalisées avec un aperçu en direct. Réglez le décalage, le flou, l'étendue et la couleur, empilez plusieurs couches et copiez le code.

Essayer

Générateur de triangle CSS

Créez des triangles CSS avec un aperçu en direct. Choisissez la direction, la taille et la couleur, la méthode border ou clip-path, puis copiez le code.

Essayer

Créateur de fond CSS

Concevez des fonds unis, dégradés et à motifs avec un aperçu en direct. Réglez les couleurs, l'angle, la position et l'espacement, puis copiez le CSS prêt à l'emploi.

Essayer

Générateur de loader CSS

Créez des spinners de chargement CSS avec un aperçu en direct. Choisissez un style, réglez la taille, la couleur et la vitesse, puis copiez le CSS et le HTML prêts à l'emploi.

Commentaires

Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.

Générateur de clip-path CSS est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.

Cité par

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge