Générateur de Chemin de Clip CSS
Vous cherchez un moyen simple de créer des formes complexes avec CSS? Notre générateur de chemin de clip CSS gratuit vous permet de concevoir et d'exporter visuellement le code de chemin de clip pour les fonctions polygone, cercle, ellipse et path (). Que vous ayez besoin d'une coupe diagonale, d'une forme d'étoile, d'une bulle de dialogue ou d'un polygone personnalisé, vous pouvez faire glisser des poignées sur un canevas dynamique, modifier les coordonnées et copier instantanément du CSS prêt pour la production. Pas besoin de mémoriser la syntaxe ou de calculer les points à la main — notre outil gère les mathématiques afin que vous puissiez vous concentrer sur la conception. Parfait pour les pages de destination, les sections de héros, les masques d'image et les mises en page créatives. Essayez-le maintenant et voyez vos formes prendre vie en temps réel!
Ce Qui Est
La propriété CSS clip-path vous permet de définir une région visible sur n'importe quel élément HTML — tout ce qui se trouve en dehors de la région est découpé. C'est l'un des outils les plus puissants du CSS moderne pour créer des mises en page non rectangulaires. Contrairement à overflow: hidden qui ne se clipse que sur la boîte, clip-path prend en charge la géométrie complexe, y compris les polygones avec des nombres de sommets arbitraires, les cercles avec des rayons réglables, les ellipses à n'importe quel angle et même les chemins basés sur SVG via la fonction path (). Valeurs communes de chemin d'élément: * polygone () - définit une forme fermée avec une liste de points x, y. Exemple: polygone(50% 0%, 100% 50%, 50% 100%, 0% 50%) crée un diamant. * cercle () - dessine un cercle avec un rayon et une position facultative. Exemple: cercle(40% à 50% 50%). * ellipse—) - dessine une ellipse avec deux rayons. Exemple: ellipse (60% 30% à 50% 50%). * inset () - coupe une région rectangulaire avec un rayon de bordure facultatif. Exemple: encart (10% autour de 8px). * path () - utilise une chaîne de chemin SVG pour une flexibilité maximale. La prise en charge des navigateurs est excellente — tous les navigateurs modernes (Chrome 55+, Firefox 54+, Safari 9+, Edge 79+) prennent en charge la syntaxe standard avec le préfixe-webkit - n'est plus nécessaire. La propriété clip-path fonctionne sur les images, les divs, les en-têtes, les éléments SVG,etc. Combiné avec des animations CSS, vous pouvez créer des effets de morphing fluides entre les formes. Notre générateur simplifie l'écriture de la syntaxe clip-path. Au lieu de deviner des pourcentages, vous faites glisser des points de contrôle sur un canevas visuel et l'outil génère un CSS propre et préfixé. Vous pouvez également importer des valeurs de tracé d'élément existantes pour les modifier, basculer entre les unités de coordonnées (pourcentages ou pixels) et exporter le résultat sous forme de bloc de code prêt à coller.
Comment utiliser
- Ouvrez le générateur de chemins de clip CSS dans votre navigateur. Un canevas vierge avec un échantillon d'élément apparaîtra.
- Choisissez un préréglage de forme dans la barre d'outils — triangle, hexagone, étoile, flèche, losange, ou sélectionnez "Personnalisé" pour repartir de zéro.
- Faites glisser les points de contrôle sur le canevas pour remodeler le polygone. Chaque point s'accroche à la grille pour plus de précision. Vous pouvez ajouter de nouveaux points en cliquant le long du bord ou supprimer des points en cliquant avec le bouton droit de la souris.
- Ajustez les paramètres globaux: choisissez entre la sortie en pourcentage ou en pixels, basculez la règle de remplissage (non nulle vs evenodd) et définissez l'origine de la transformation si vous prévoyez d'animer la forme.
- Copiez le CSS généré à partir du panneau de sortie. Le code inclut la propriété clip-path et les préfixes de fournisseur nécessaires. Collez - le dans votre feuille de style ou votre attribut de style en ligne.
- Testez sur tous les navigateurs à l'aide du vérificateur de compatibilité intégré, puis appliquez des transitions CSS pour créer des effets de morphing animés de chemin de clip.
Exemples
Entrée: Polygone: 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
Processus: Map 5 points on coordinate plane → Connect sequentially → Create pentagon shape
Résultat: chemin du clip: polygone(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
Entrée: Cercle: cercle(50% à 50% 50%)
Processus: Define radius 50% → Center at 50%,50% → Generate ellipse path
Résultat: clip-chemin: cercle (50% à 50% 50%)
Entrée: Encart: encart (10% 20% 30% 40% rond 12px)
Processus: Calculate 4 offsets → Apply border-radius → Clip content area
Résultat: chemin du clip: encart (10% 20% 30% 40% rond 12px)
Recherches Connexes
Les gens recherchent aussi : css, chemin du clip, formes, polygone, chemin.
csschemin du clipformespolygonechemin
Questions Fréquemment Posées
Quelle est la différence entre clip-path et overflow: hidden?
débordement: de simples clips de contenu dans la boîte englobante rectangulaire de l'élément. Il ne peut pas créer de coupes diagonales ou de polygones complexes. clip-path, d'autre part, définit une région d'écrêtage personnalisée qui peut être n'importe quelle forme — cercles, étoiles, flèches ou polygones arbitraires avec des dizaines de sommets. Si vous avez besoin d'une coupe rectangulaire, le débordement fonctionne bien; pour tout ce qui n'est pas rectangulaire, clip-path est la voie à suivre.
Puis-je animer un chemin de clip avec des transitions CSS ou des animations d'images clés?
Oui! Vous pouvez animer un chemin d'élément entre deux formes du même nombre de points à l'aide de transitions CSS ou @keyframes. Pour une transformation fluide, les fonctions polygon () de début et de fin doivent avoir le même nombre de coordonnées de sommet. Par exemple, passer d'un polygone(50% 0%, 100% 100%, 0% 100%) au polygone(50% 10%, 90% 90%, 10% 90%) fonctionne en douceur. Si le nombre de points diffère, le navigateur s'enclenchera instantanément sans interpolation.
Le clip-path affecte-t-il les événements de clic et l'accessibilité?
clip-path modifie la visibilité visuelle d'un élément mais ne modifie pas sa boîte englobante dans le DOM. Les événements de clic, les rectangles de focus et les régions de lecteur d'écran suivent toujours la boîte rectangulaire d'origine. C'est une source courante de confusion — un élément qui ressemble à un losange occupe toujours toute sa zone rectangulaire pour les événements de pointeur. Si vous avez besoin de tests de succès précis, envisagez plutôt d'utiliser SVG avec clipPath.
Comment créer un chemin de clip réactif qui s'adapte aux différentes tailles d'écran?
Utilisez des coordonnées basées sur le pourcentage dans polygon (), circle () ou ellipse() au lieu de pixels fixes. Les pourcentages sont relatifs au cadre de sélection de l'élément, de sorte que votre forme évolue proportionnellement au redimensionnement de l'élément. Toutes les formes générées par notre outil sont par défaut en pourcentage — assurez-vous simplement de ne pas passer en mode pixel si la réactivité est importante.
Puis-je utiliser clip-path sur des images d'arrière-plan et des dégradés?
Absolument. clip-path s'applique à l'élément entier, y compris son arrière-plan, son image d'arrière-plan et son dégradé d'arrière-plan. Vous pouvez placer un arrière-plan dégradé sur un div, puis le découper en une forme hexagonale — le dégradé ne sera visible que dans la région découpée. Cette technique est idéale pour les sections de héros créatifs et les cadres d'image décoratifs sans avoir besoin d'un logiciel d'édition d'image externe.