Générateur de CSS Clip-path
Le générateur de clip-path CSS produit des valeurs clip-path pour les formes courantes (triangle, flèche, pentagone, hexagone, étoile, chevron, cercle, ellipse et inset arrondi) avec un aperçu en direct.
À propos de cet outil
Le générateur de clip-path CSS produit des valeurs clip-path pour les formes courantes (triangle, flèche, pentagone, hexagone, étoile, chevron, cercle, ellipse et inset arrondi) avec un aperçu en direct.
Mode d’emploi
- Choisissez une forme dans la liste.
- Choisissez une couleur de remplissage pour l’aperçu.
- Cliquez sur Copier le CSS et appliquez le clip-path à n’importe quel élément ou image.
Bon à savoir
- clip-path masque tout ce qui se trouve hors d’une forme : aucun masque d’image ni fichier SVG n’est nécessaire.
- polygon() accepte une liste de points x y en pourcentages, qui s’adaptent à la taille de l’élément.
- circle(50% at 50% 50%) découpe un élément en cercle centré.
- inset() avec round ajoute des coins arrondis à une découpe rectangulaire.
- Les formes de base de clip-path sont prises en charge par tous les grands navigateurs actuels.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment découper une image selon une forme en CSS ?
Appliquez un clip-path à l’image, par exemple clip-path: polygon(50% 0%, 0% 100%, 100% 100%); pour un triangle.
Quelle est la différence entre clip-path et mask ?
clip-path découpe une forme vectorielle aux bords nets. mask utilise une image ou un dégradé et peut créer des bords doux, partiellement transparents.
Peut-on animer clip-path ?
Oui : si les deux formes utilisent la même fonction et le même nombre de points, le navigateur peut passer de l’une à l’autre en transition.
clip-path a-t-il un effet sur les clics ?
Oui. Les zones hors de la forme découpée ne sont pas affichées et ne reçoivent pas les événements de pointeur.