◇

Générateur de clip-path CSS

Découpez un élément en formes courantes et copiez le CSS clip-path.

Vos fichiers restent sur cet appareil

Les fichiers sont traités dans votre navigateur, jamais envoyés. Le site télécharge le code et les ressources nécessaires aux outils. Sans compte ni traceurs.

Utilisez Télécharger pour enregistrer cet outil dans un fichier HTML utilisable hors ligne.

Confidentialité →

Forme

sortie

Essayez un exemple détaillé

Exemple

Choisissez la forme hexagone pour obtenir clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Chaque paire est une position x et y dans l’élément, donc la forme s’étire avec sa largeur et sa hauteur.

À retenir

Le découpage masque une partie de l’élément mais conserve sa boîte de mise en page : les voisins ne bougent pas et les coins masqués ne reçoivent plus les clics. Les bordures et ombres de boîte sont aussi découpées ; pour une ombre, appliquez un filtre drop-shadow à un conteneur.

À propos de cet outil

Choisissez une forme et découpez instantanément une zone d'aperçu avec la règle clip-path correspondante, puis copiez le CSS prêt à l'emploi. L'aperçu se met à jour en direct, entièrement dans votre navigateur.

Foire aux questions

Comment fonctionnent les clip-paths de type polygone ?

Chaque point est une paire de pourcentages x y relative à la boîte ; le navigateur les relie dans l'ordre et n'affiche que la zone située à l'intérieur du contour.

Tous les navigateurs prennent-ils en charge clip-path ?

Les formes polygon, circle, ellipse et inset sont prises en charge par tous les navigateurs modernes, donc le CSS généré fonctionne sans préfixes.