Générateur de Clip-Path CSS

Contrôles

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Choisissez un type de forme — Sélectionnez polygone, cercle, ellipse ou inset dans le sélecteur de forme.
    2.  
  2. Utilisez un préréglage ou déplacez les points — Partez de l'un des 12 préréglages de polygone (triangle, flèche, étoile…) ou déplacez les poignées sur l'aperçu pour affiner.
    3.  
  3. Ajustez les paramètres — Pour cercle/ellipse, définissez le rayon et la position. Pour inset, contrôlez chaque côté indépendamment.
    4.  
  4. Copiez le CSS — Cliquez sur « Copier le CSS » pour obtenir la valeur clip-path prête à coller.
    5.  
 
 
 
Qu'est-ce que CSS clip-path ?
 
CSS clip-path masque un élément selon une forme précise, cachant tout ce qui dépasse la région définie. L'espace original de l'élément est conservé — seule la zone visible change.
 
Il prend en charge polygon(), circle(), ellipse(), inset() et path() (chemins SVG). Les formes sont définies en coordonnées relatives (pourcentage) ou absolues par rapport à la boîte englobante de l'élément.
 
 
 
Cas d'usage courants
 
 
Coupes de sections diagonales
 
Grilles d'images hexagonales
 
Formes hero personnalisées
 
Bulles de dialogue
 
Effets d'apparition animés
 
Coins ruban / bannière
 
Recadrages d'avatars circulaires
 
Séparateurs flèche / chevron
 
 
Conseils & bonnes pratiques
 
 
 Animer clip-path 
Vous pouvez faire une transition entre deux formes polygon() si elles ont le même nombre de points. À utiliser pour des effets de survol qui se transforment ou des révélations de sections au défilement.
 
 
 Le dépassement est masqué 
clip-path rogne tout contenu débordant, y compris box-shadow. Appliquez les ombres à un conteneur plutôt qu'à l'élément rogné lui-même.
 
 
 Utilisez des pourcentages 
Définissez les points du polygone en pourcentages pour que la forme s'adapte correctement aux mises en page responsives, sans media queries.
 
 
 Compatibilité navigateurs 
Tous les navigateurs modernes prennent en charge clip-path avec les formes de base. La fonction path() est moins constamment prise en charge — préférez polygon pour une compatibilité large.
 
 
 
Questions fréquentes
 
 
clip-path affecte-t-il la mise en page de l'élément ?
 
Non. L'élément occupe toujours son espace original complet dans le flux du document. Seul le rendu visuel change. Utilisez shape-outside si vous voulez que le texte s'enroule autour de la forme.
 
 
 
Puis-je animer clip-path ?
 
Oui, si le type de forme reste identique et que les points du polygone sont en nombre égal. Faites une transition entre deux formes polygon() pour des effets de morphing : transition: clip-path 0.4s ease;.
 
 
 
Pourquoi mon box-shadow ne s'affiche-t-il pas ?
 
clip-path rogne tout ce qui est hors de la forme, y compris les ombres. Appliquez box-shadow à un conteneur parent qui n'est pas rogné.
 
 
 
Quelle différence entre clip-path et mask ?
 
clip-path utilise des formes géométriques pour un rognage à bords nets. mask utilise des images ou des dégradés, permettant des bords doux et une transparence partielle. Pour des formes simples, clip-path est plus rapide et plus facile.