Générateur de Clip-Path CSS
Guide
Générateur de Clip-Path CSS
Créez visuellement des formes CSS clip-path avec un éditeur intuitif par glisser-déposer. Construisez des polygones, des cercles, des ellipses et des formes d'inset, puis copiez le CSS généré directement dans vos feuilles de style.
Comment utiliser
Sélectionnez un type de forme ou partez d'un modèle prédéfini. Faites glisser les points de contrôle pour ajuster visuellement la forme sur le canevas de prévisualisation. Le code CSS clip-path se met à jour en temps réel pendant que vous éditez. Lorsque vous êtes satisfait du résultat, copiez le code CSS généré ou exportez au format SVG.
Caractéristiques
- Éditeur visuel par glisser-déposer – Créez des formes en déplaçant les points de contrôle directement sur le canevas
- Plusieurs types de formes – Polygone, cercle, ellipse et inset
- Modèles prédéfinis – Partez de formes courantes comme les triangles, les étoiles, les flèches, et plus encore
- Annuler et rétablir – Prise en charge complète de l'historique pour une édition non destructive
- Accrochage à la grille – Placement précis des points avec accrochage configurable à la grille
- Exportation SVG – Téléchargez votre forme sous forme de fichier SVG
- Sortie CSS en direct – Copiez instantanément la propriété clip-path générée
FAQ
-
Qu'est-ce qu'un clip-path CSS et comment fonctionne-t-il ?
Un clip-path CSS définit une région de découpage qui détermine quelles parties d'un élément sont visibles. Tout ce qui se trouve à l'extérieur de la forme clip-path est masqué. Il prend en charge les formes de base (cercle, ellipse, inset, polygone) et les définitions de chemin SVG. Contrairement à overflow:hidden qui se limite aux bords rectangulaires, clip-path peut créer des zones visibles non rectangulaires complexes pour des mises en page et des effets visuels créatifs.
-
Quelle est la différence entre clip-path et mask en CSS ?
Clip-path crée un bord net — les pixels sont soit entièrement visibles, soit entièrement cachés en fonction de leur position à l'intérieur de la forme définie. Le masque CSS utilise une image ou un dégradé pour contrôler la transparence, permettant des bords doux et une transparence partielle. Clip-path est plus simple et plus performant pour les formes géométriques, tandis que les masques offrent plus de contrôle artistique avec les dégradés et les canaux alpha.
-
Comment fonctionnent les coordonnées polygonales CSS ?
Les coordonnées polygonales dans clip-path utilisent des valeurs en pourcentage ou en longueur relatives à la boîte englobante de l'élément. Chaque point est défini comme une paire x,y où 0% 0% est le coin supérieur gauche et 100% 100% est le coin inférieur droit. Les points sont connectés dans l'ordre pour former la forme. Par exemple, polygon(50% 0%, 100% 100%, 0% 100%) crée un triangle. La forme se ferme automatiquement en reliant le dernier point au premier.
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
Outils essentiels
Tout voir Nouveautés
Tout voirMise à jour: Notre dernier outil a été ajouté le Mar 19, 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
