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.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

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

Est-ce envoyé quelque part ?

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.

Puis-je ajouter ou supprimer des points du polygone ?

Pas dans cette version - choisissez le préréglage le plus proche et faites glisser ses points existants. Un éditeur de points complet est un ajout futur possible.

Pourquoi ma forme disparaît-elle à certaines valeurs de curseur ?

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.

Puis-je déplacer les points du polygone au clavier au lieu de les glisser ?

Oui. Utilisez Tab pour atteindre un point puis les flèches pour le déplacer - Maj pour un pas plus grand.

Outils similaires

Commentaires

Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.