Générateur de chemins de découpe CSS Clip-Path

Générez visuellement du code de chemin de découpe CSS clip-path, avec prise en charge des polygones, cercles, ellipses et autres formes, et traitement par lots des images

Signaler un bug

Mode d’exécution du navigateur: Vos données sont traitées dans votre navigateur et ne sont pas envoyées au serveur.

Vitesse et stabilité: La vitesse de traitement dépend de votre appareil et de votre navigateur. Pour les gros lots, la version de bureau peut être plus stable.

Chargement de l’outil, veuillez patienter...

Si l’outil en ligne ne se charge pas ou ne fonctionne pas, essayez l’outil de bureau. https://tools.yikeaigc.com/

Utilisation de l’outil

Retour à l’ancienne version

Définissez d’abord le tracé de découpe, puis copiez le code ou traitez les images par lot

Après avoir choisi une forme prédéfinie, vous pouvez faire glisser les points du polygone, ou passer au cercle, à l’ellipse ou au rectangle inset et ajuster les paramètres. Le traitement par lot utilisera le tracé actuel. Si plusieurs images sont importées, seules les 20 premières sont affichées, mais toutes seront traitées.

Infos du tracé actuel

Typepolygon

Points de contrôle3

Astuce : terminez d’abord le tracé, puis copiez le code ou traitez les images.

Aperçu en direct En mode polygone, faites glisser les points bleus ; les coordonnées génèrent le CSS.

Coordonnées : relatives à l’élément, coin haut gauche = 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Forme et préréglages Choisir le type, puis ajuster

Type de forme

Catégories prédéfinies

Paramètres du tracé Les valeurs acceptent les pourcentages

Texte des coordonnées

Rayon

Centre X

Centre Y

Rayon horizontal

Rayon vertical

Centre X

Centre Y

Haut

Droite

Bas

Gauche

Coins arrondis

Aperçu et sortie L’arrière-plan n’affecte que l’aperçu et l’export d’image

Largeur d’aperçu (px)

Hauteur d’aperçu (px)

Couleur A

Couleur B

Angle du dégradé

Aperçu de l’image

Afficher les limites de l’élément Inclure le préfixe -webkit Générer un sélecteur de classe

Générer le code

Le code se met à jour en temps réel avec les réglages.

Appliquer le tracé actuel en lot Définissez d’abord le tracé à l’étape précédente, puis choisissez le traitement d’image.

Cliquez ou déposez des images Formats courants pris en charge : JPG, PNG, WebP, GIF, BMP, etc.

Aucune image sélectionnée.

Paramètres de sortie PNG prend en charge l’arrière-plan transparent

Format de sortie

Mode de taille

Limiter le grand côté (px)

Largeur perso (px)

Hauteur perso (px)

Qualité de sortie92%

Zone hors découpe transparente Utiliser le tracé actuel

En attente de traitement.

Aperçu et résultats des images Après l’import, les 20 premières images s’affichent ; le traitement inclut tous les fichiers.

Images à traiter0 image

Sélectionnez des images pour voir les miniatures.

Résultats0 image

Les miniatures des résultats s’affichent après traitement.

Instructions

Instructions d’utilisation du logiciel

Concevoir le tracé de découpe : après être entré dans l’outil, choisissez d’abord le type de forme à l’étape « Concevoir le tracé » : polygone, cercle, ellipse ou rectangle inset.
Choisir une forme prédéfinie : sélectionnez un préréglage parmi les formes de base, les flèches et symboles, ou les formes décoratives, puis ajustez les paramètres selon vos besoins.
Modifier les paramètres du tracé : pour un polygone, vous pouvez faire glisser les points de contrôle ou saisir des coordonnées en pourcentage dans le champ de coordonnées ; pour un cercle, une ellipse ou un rectangle inset, saisissez directement le rayon, le centre, les marges et les coins arrondis.
Définir l’aperçu : ajustez la largeur et la hauteur de l’aperçu, les couleurs du dégradé et son angle, ou choisissez une image comme contenu d’aperçu.
Copier le code CSS : une fois le résultat confirmé, cliquez sur « Copier clip-path » ou « Copier le CSS » ; vous pouvez choisir d’inclure ou non le préfixe -webkit et le sélecteur de classe.
Traitement d’images par lots : cliquez sur « Étape suivante : traitement par lots », sélectionnez plusieurs images, définissez le format de sortie, la qualité et le mode de dimensions, puis lancez le traitement.
Télécharger les résultats : une fois le traitement terminé, cliquez sur « Télécharger tous les résultats ZIP » ; les fichiers de sortie conserveront autant que possible le nom d’origine, et un numéro sera automatiquement ajouté en cas de doublon.

Questions fréquentes

R : clip-path sert à découper un élément selon une forme définie. Elle est souvent utilisée pour afficher des images aux formes originales, concevoir les bords de cartes, créer des boutons, des éléments décoratifs de page web et des effets interactifs.

R : polygon crée un polygone à partir de plusieurs points de coordonnées ; circle crée une zone de découpe circulaire ; ellipse crée une zone de découpe elliptique ; inset crée un rectangle inset et prend en charge les paramètres de coins arrondis.

R : les coordonnées sont exprimées en pourcentage. Par exemple, 50% 0% correspond au milieu du bord supérieur de l’élément, et 100% 100% au coin inférieur droit. Les points doivent être séparés par des virgules, avec au moins 3 points.

R : -webkit-clip-path est utilisé pour assurer la compatibilité avec certains environnements basés sur le moteur WebKit. Pour améliorer la compatibilité, vous pouvez conserver à la fois la version avec préfixe et la syntaxe standard.

R : Vous pouvez sélectionner des formats d’image courants en entrée ; la sortie prend en charge PNG, JPEG et WebP. PNG convient pour conserver les zones transparentes, JPEG pour générer des fichiers plus petits, et WebP pour équilibrer taille et qualité d’image.

R : L’outil essaiera autant que possible de conserver le nom de fichier d’origine et remplacera l’extension selon le format de sortie. En cas de fichiers portant le même nom, un numéro sera ajouté à la fin du nom afin d’éviter que les résultats ne se remplacent mutuellement.