Skip to main content
FreeToolkit .ai

Générateur de formes de découpe CSS Créez des formes de découpe CSS avec des présélections de polygone, cercle et ellipse.

Générateur de formes de découpe CSS illustration
🎨

Générateur de formes de découpe CSS

Créez des formes de découpe CSS avec des présélections de polygone, cercle et ellipse.

1

Sélectionnez une forme prédéfinie

Choisissez parmi les formes prédéfinies intégrées comme le triangle, l'hexagone, l'étoile, le cercle ou l'ellipse.

2

Personnalisez le chemin

Éditez directement la valeur de clip-path pour un contrôle précis sur la forme.

3

Copiez le CSS

Prévisualisez la forme découpée et copiez le CSS avec le préfixe webkit inclus.

Loading tool...

What Is Générateur de formes de découpe CSS?

Le générateur de chemins de découpe CSS crée des masques de découpe pour les éléments HTML à l'aide de la propriété clip-path. La propriété clip-path définit une région visible pour un élément - tout ce qui se trouve en dehors du chemin est caché. Cet outil prend en charge plusieurs fonctions de forme : polygon pour des formes personnalisées à plusieurs points, circle pour les découpes circulaires, ellipse pour les formes ovales et inset pour les découpes rectangulaires avec arrondis facultatifs. Une bibliothèque de formes prédéfinies comprend le triangle, le trapèze, le parallélogramme, le losange, le pentagone, l'hexagone et l'étoile. Vous pouvez également éditer directement la valeur clip-path pour des formes personnalisées. Le CSS généré inclut le préfixe -webkit-clip-path pour une prise en charge plus large des navigateurs. La propriété clip-path est puissante pour créer des dispositions non rectangulaires, des masques d'image, des séparateurs de section créatifs et des formes d'éléments d'interface utilisateur uniques.

Why Use Générateur de formes de découpe CSS?

  • Bibliothèque de formes prédéfinies étendue, comprenant des polygones, des cercles et des étoiles
  • Édition directe des valeurs de clip-path pour les formes personnalisées
  • Inclut le préfixe webkit pour une prise en charge plus large des navigateurs
  • Prévisualisation en temps réel avec couleur de fond personnalisable

Common Use Cases

Masques d'images

Découpez les images dans des formes personnalisées comme des cercles, des hexagones ou des étoiles.

Séparateurs de sections

Créez des transitions de section inclinées ou courbes avec clip-path.

Dispositions créatives

Concevez des zones de contenu non rectangulaires pour des conceptions de page uniques.

Photos de profil

Découpez les avatars d'utilisateurs dans des formes hexagonales ou arrondies.

Technical Guide

La propriété CSS clip-path accepte plusieurs fonctions de forme : polygon() définit une forme à l'aide de paires de coordonnées en pourcentages ou en longueurs. circle() crée une découpe circulaire avec rayon et position du centre. ellipse() crée une forme ovale avec des rayons horizontaux et verticaux. inset() crée une découpe rectangulaire avec un rayon de bord facultatif. La fonction polygon accepte n'importe quel nombre de paires de coordonnées x y, ce qui en fait la plus flexible. Les coordonnées sont relatives à l'élément - 0% 0% correspond au coin supérieur gauche et 100% 100% correspond au coin inférieur droit. Pour les animations, clip-path peut être transité si la même fonction de forme est utilisée avec le même nombre de points. La prise en charge des navigateurs est bonne dans les navigateurs modernes, mais le préfixe -webkit- est recommandé pour Safari. La propriété clip-path n'affecte pas la disposition - l'élément conserve ses dimensions de modèle de boîte d'origine.

Tips & Best Practices

  • 1
    Commencez avec une forme prédéfinie et modifiez les valeurs pour des formes personnalisées
  • 2
    Utilisez le même nombre de points de polygone pour des transitions animables
  • 3
    Combinez avec les transitions CSS pour des effets de révélation et de morphisme
  • 4
    clip-path fonctionne bien sur les images et les éléments de fond

Related Tools

Générateur de triangles CSS - free online tool

Générateur de triangles CSS

Générer des triangles CSS en utilisant la technique de bordure avec contrôle de direction et de couleur.

🎨 CSS & Design
Générateur de formes blob CSS - free online tool

Générateur de formes blob CSS

Générer des formes blob organiques sous forme de SVG avec des remplissages de dégradé et une randomisation.

🎨 CSS & Design
Générateur de vagues CSS - free online tool

Générateur de vagues CSS

Générer des diviseurs de sections en forme de vague SVG avec des vagues, une hauteur et des couleurs personnalisables.

🎨 CSS & Design
Générateur de séparateurs CSS - free online tool

Générateur de séparateurs CSS

Générer des séparateurs de sections CSS avec plusieurs styles, notamment dégradé, ombre et zigzag.

🎨 CSS & Design

Frequently Asked Questions

Q Clip-path affecte-t-il le layout de l'élément ?
Non, l'élément conserve son modèle de boîte complet. Seule la représentation visible est affectée par le découpage.
Q Puis-je animer clip-path ?
Oui, clip-path prend en charge les transitions CSS lorsque la même fonction et le même nombre de points sont utilisés dans les deux états.
Q Clip-path est-il pris en charge par tous les navigateurs ?
Les navigateurs modernes prennent en charge clip-path. Le préfixe -webkit- assure la compatibilité Safari. IE ne prend pas en charge clip-path.
Q Puis-je découper du texte avec clip-path ?
Oui, clip-path fonctionne sur n'importe quel élément HTML, y compris les conteneurs de texte. Utilisez -webkit-background-clip: text pour un découpage spécifique au texte.
Q Quelle est la différence entre clip-path et masque ?
clip-path utilise des fonctions de forme pour un découpage à bord dur. Le masque CSS utilise des images ou des dégradés et prend en charge les bords doux et la transparence partielle.

About This Tool

Générateur de formes de découpe CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.