Outils · CSS · Générateur de clip-path
Générateur de clip-path
Créez une forme de découpe CSS clip-path - polygone, cercle, ellipse ou rectangle intérieur - avec un aperçu en direct, et copiez le code.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Choisissez un type de forme (polygone, cercle, ellipse ou rectangle intérieur), ou un préréglage de polygone.
Faites glisser les points sur l'aperçu, ou utilisez les curseurs, pour affiner la forme.
Copiez le CSS clip-path généré.
Questions fréquentes
Non. La forme est générée et affichée entièrement dans votre navigateur - ce ne sont que des maths et du texte CSS.
Oui. Ouvrez Coordonnées des points et utilisez Ajouter un point - il coupe le côté le plus long - ou le bouton Supprimer d'une ligne. Un polygone garde au moins trois points.
Certaines combinaisons - comme un rectangle intérieur qui couvre toute la boîte - sont du CSS valide qui masque tout. Ce n'est pas un bug, juste une valeur légale mais dégénérée.
Oui. Utilisez Tab pour atteindre un point puis les flèches pour le déplacer - Maj pour un pas plus grand.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
Lire le guideHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
Lire le guideMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
Lire le guide
Commentaires