Générateur de chemin de détourage
Créez visuellement des formes de chemin de détourage CSS - pas de devinette manuelle des coordonnées. Choisissez parmi 12 préréglages, faites glisser les points du polygone sur l'aperçu en direct et copiez le CSS en un clic.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Caractéristiques
- Glisser pour modifier : faites glisser les points du polygone directement sur l'aperçu visuel pour les remodeler en temps réel. Pas besoin de deviner les coordonnées : voyez exactement à quoi ressemble votre chemin de découpe lorsque vous l'ajustez.
- 12 formes prédéfinies : partez de formes courantes : cercle, triangle, losange, hexagone, étoile, cœur, etc. Chaque préréglage est réglé pour le meilleur point de départ, prêt à être personnalisé davantage.
- Sortie CSS instantanée : copiez la valeur du chemin du clip CSS ou la déclaration complète en un seul clic. Tous les navigateurs modernes sont pris en charge et aucun préfixe de fournisseur n'est nécessaire.
- Fonctionne hors ligne : tout le traitement s'effectue dans votre navigateur - aucun aller-retour entre le serveur. L'outil fonctionne même sans connexion Internet une fois la page chargée.
Cas d'utilisation
- Recadrage d'images créatif : découpez les images dans des formes personnalisées (losanges, hexagones, étoiles ou polygones) pour obtenir des miniatures de portfolio, des grilles de galerie et des visuels de section de héros uniques.
- Animations de parallaxe et de défilement : ajoutez des transitions de chemin de clip pour révéler les éléments lorsque les utilisateurs font défiler. Animez entre les formes de polygones pour obtenir des effets fluides et modernes déclenchés par le défilement.
- Séparateurs de cartes et de sections : utilisez des chemins de détourage diagonaux ou incurvés pour créer des séparateurs de sections entre les blocs de page. Mieux que les transformations CSS pour maintenir une mise en page réactive.
- Cadres de profil et d'avatar : recadrez les photos de profil utilisateur en cercles, hexagones ou cadres polygonaux personnalisés pour les pages d'équipe, les fonctionnalités sociales et les répertoires d'utilisateurs.
- Conception de héros et de pages de destination : créez des sections de héros accrocheuses avec des divisions diagonales, des formes qui se chevauchent et des chemins de découpe asymétriques qui guident l'œil à travers la page.
- Actifs géométriques de la marque : créez des formes géométriques cohérentes pour les illustrations de marque, les arrière-plans d'icônes et les éléments décoratifs qui correspondent à l'identité de votre marque.
Foire aux questions
Le chemin de clip CSS est utilisé pour découper (masquer) des parties d'un élément afin que seule une forme spécifique soit visible. Les utilisations courantes incluent : le recadrage d'images dans des formes personnalisées (cercles, polygones, étoiles), la création de séparateurs de section diagonale, l'animation de transitions de page, la création d'effets de survol et la création d'éléments de conception géométriques sans SVG ni ressources d'image.
Oui! clip-path est une propriété animable. Vous pouvez utiliser des transitions CSS ou @keyframes pour animer entre les valeurs du chemin de clip. Pour un morphing fluide, assurez-vous que les deux états utilisent la même fonction de forme avec le même nombre de points (par exemple, un polygone à 6 points se transformant en un autre polygone à 6 points). L'animation entre différents types de formes (cercle à polygone) peut ne pas s'interpoler correctement dans tous les navigateurs.
L'ancienne propriété clip (obsolète) ne fonctionnait qu'avec des éléments positionnés de manière absolue et acceptait une forme rect(). clip-path est le remplacement moderne qui prend en charge les formes circle(), ellipse(), inset(), polygon() et path(), fonctionne avec n'importe quel élément positionné et est entièrement animable. Utilisez toujours le chemin du clip pour les nouveaux projets.
Pour une animation fluide de polygone à polygone, les deux polygones doivent avoir le même nombre de points. Le navigateur interpole indépendamment la position de chaque point. Par exemple, un hexagone à 6 branches peut se transformer en douceur en une étoile à 6 branches. Si le nombre de points diffère, l'animation s'accrochera plutôt que de se transformer en douceur.
La fonction path() accepte les données de chemin SVG (syntaxe d'attribut d) pour créer des formes de découpage entièrement personnalisées. Par exemple : clip-path: path('M 50 0 L 100 50 L 50 100 L 0 50 Z'); crée un diamant. Cela vous offre des possibilités de forme illimitées au-delà de ce que le cercle/ellipse/encart/polygone peut créer. Remarque : path() nécessite Safari 15.4+.
Non - clip-path affecte uniquement le rendu visuel de l'élément. Le cadre de délimitation d'origine de l'élément occupe toujours le même espace dans la mise en page. Les événements (clic, survol) ne se déclencheront que dans la zone découpée visible dans la plupart des navigateurs modernes. Pour une mise en page véritablement non rectangulaire, pensez à utiliser des formes CSS ou shape-outside.
Pour les polygones, les cercles, les ellipses et les encarts : aucun préfixe n'est nécessaire dans les navigateurs modernes (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). Pour path() : Safari 15.4+ sans préfixe. Pour les très anciens navigateurs, vous pouvez utiliser -webkit-clip-path comme solution de secours. L'outil génère un chemin de clip standard sans préfixe qui fonctionne dans tous les navigateurs actuels.
Oui! clip-path peut être appliqué à n’importe quel élément HTML, y compris le texte. Vous pouvez découper du texte dans des formes spécifiques, mais le texte lui-même est découpé et non redistribué. Pour le texte qui suit un chemin ou une forme, utilisez plutôt des formes CSS avec shape-outside. Une utilisation courante consiste à créer des animations de révélation de texte uniquement avec morphing de chemin de clip.