Générateur clip-path CSS
Un générateur intuitif pour créer des formes clip-path CSS par glisser-déposer. Supporte les polygones, cercles et ellipses.
Éditeur
Cliquez pour ajouter un sommet. Glissez pour déplacer. Clic droit pour supprimer.
Paramètres
Animation au survol
Si activé, génère le code hover. Le nombre de sommets doit correspondre.
Édition de la forme de base. Passez à l'état hover pour configurer l'animation.
Code Généré
À propos du Générateur
Créez intuitivement des propriétés clip-path CSS par glisser-déposer.
Plus besoin de calculs complexes. Générez le code en un clic.
Supporte diverses formes et animations.
Comment utiliser
1️⃣ Choisir
Sélectionnez une forme.
2️⃣ Ajuster
Déplacez les sommets.
3️⃣ Copier
Copiez le code et collez-le.
Guide des Propriétés
Explications des fonctions :
■ polygon() — Polygone
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Spécifiez les coordonnées. Minimum 3 sommets.
■ circle() — Cercle
clip-path: circle(rayon at centreX centreY)
Rayon et centre du cercle.
■ ellipse() — Ellipse
clip-path: ellipse(rx ry at centreX centreY)
Dessine une ellipse.
■ inset() — Découpe Rectangulaire
clip-path: inset(haut droite bas gauche round rayon)
Découpe vers l'intérieur. Bords arrondis supportés.
FAQ
- Q.Le clip-path affecte-t-il le SEO ?
- Non. Il modifie le rendu visuel sans altérer la structure HTML.
- Q.Différence entre CSS clip-path et SVG clipPath ?
- Le CSS utilise des fonctions intégrées. Le SVG est défini via un élément. Le CSS est plus simple.
- Q.Puis-je animer clip-path au survol ?
- Oui, si le nombre de sommets est identique avant et après.
- Q.Les zones découpées sont-elles cliquables ?
- Non. Les événements ne se déclenchent pas en dehors de la région affichée.
- Q.Y a-t-il des risques de sécurité ?
- Aucun. Tout est exécuté localement dans votre navigateur.
Cas d'usage
Découpes Diagonales
Créez des sections dynamiques avec des découpes diagonales.
Images de Profil
Recadrez en hexagones ou étoiles.
Animations au survol
Animez l'image pour qu'elle s'agrandisse au survol.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.