Createur CSS Clip-path

Créateur CSS Clip-path - Générateur Visuel de Formes

CSS clip-path est l'une des propriétés les plus puissantes mais sous-utilisées du CSS moderne — elle permet de découper n'importe quel élément HTML en formes géométriques en utilisant polygones, cercles, ellipses ou rectangles inset, avec un rendu accéléré par GPU et un support complet des animations et transitions CSS. L'inconvénient est que la syntaxe est impitoyable : une forme de polygone nécessite des paires de coordonnées saisies à la main, et toute coquille casse silencieusement tout le découpage. Cet éditeur visuel vous permet de faire glisser des points sur un aperçu en direct, de basculer entre les types de formes et d'appliquer 12 formes prédéfinies (triangle, rectangle, pentagone, hexagone, étoile, flèche, chevron, croix, losange, etc.). Vous pouvez aussi importer une valeur clip-path existante pour la modifier visuellement, puis copier du CSS prêt pour la production qui inclut à la fois le préfixe -webkit-clip-path et le clip-path non préfixé, fonctionnant dans Chrome 55+, Firefox 54+, Safari 9.1+ et Edge 79+.

Qu'est-ce que CSS clip-path ?

CSS clip-path est une propriété qui crée une région de découpage pour définir quelles parties d'un élément sont visibles. Les parties en dehors de la région de découpage sont cachées.

Types de forme :

polygon() - Formes personnalisées avec plusieurs points
circle() - Découpage circulaire
ellipse() - Découpage ovale
inset() - Rectangulaire avec coins arrondis optionnels

Puis-je modifier un clip-path existant ?

Oui. Collez n'importe quelle valeur CSS clip-path existante dans la zone Importer un clip-path et cliquez sur Importer — l'outil détecte le type de fonction, bascule vers la forme correspondante et remplit chaque point ou contrôle pour que vous puissiez l'ajuster visuellement. Cela fonctionne pour les listes de coordonnées polygon(), circle(R at CX CY), ellipse(RX RY at CX CY) et inset() avec abréviation à 1/2/4 valeurs et un rayon 'round' optionnel.

C'est le moyen le plus rapide de refactoriser un clip-path hérité d'une feuille de style ou d'un design system : au lieu de retaper chaque coordonnée à la main, collez, glissez les points et copiez le CSS mis à jour. Le centre 'at ...' est optionnel pour le cercle et l'ellipse et vaut 50% 50% par défaut s'il est omis.

Que signifient closest-side et farthest-side pour le rayon du cercle ?

circle() et ellipse() acceptent des rayons par mot-clé en plus des pourcentages. closest-side dimensionne la forme pour que son bord touche le côté de la boîte le plus proche du centre, et farthest-side l'étend jusqu'au côté le plus éloigné. closest-corner et farthest-corner référencent les coins de la boîte.

Exemple : circle(closest-side at 50% 50%) tient toujours à l'intérieur de l'élément quel que soit le rapport d'aspect. Les pourcentages (comme circle(40%)) sont résolus par rapport à une valeur de référence dérivée de la largeur et de la hauteur de l'élément, donc un rayon en pourcentage peut dépasser la boîte sur des éléments très non carrés. Utilisez les mots-clés quand vous voulez que le découpage reste contenu lors du redimensionnement. Cet éditeur visuel travaille en pourcentages pour une édition précise par glissement ; passez aux rayons par mot-clé à la main dans votre CSS final lorsque vous avez besoin d'un confinement responsive.

Comment créer un clip-path polygone ?

Le clip-path polygone utilise des points de coordonnées :

Syntaxe : polygon(x1% y1%, x2% y2%, ...)

Chaque point est défini par des pourcentages X et Y :
- 0% 0% = coin supérieur gauche
- 100% 0% = coin supérieur droit
- 100% 100% = coin inférieur droit
- 0% 100% = coin inférieur gauche

Comment fonctionnent cercle et ellipse ?

Syntaxe du cercle :
circle(rayon at centreX centreY)

Exemple : circle(50% at 50% 50%)
- Crée un cercle avec un rayon de 50%
- Centré à 50% 50%

Syntaxe de l'ellipse :
ellipse(rayonX rayonY at centreX centreY)

Exemple : ellipse(50% 30% at 50% 50%)

Qu'est-ce que l'inset clip-path ?

Inset crée un découpage rectangulaire avec des coins arrondis optionnels :

Syntaxe : inset(haut droite bas gauche round rayon)

Les valeurs représentent le retrait de chaque bord :
- inset(10%) - 10% de tous les côtés
- inset(10% 20%) - 10% haut/bas, 20% gauche/droite

Quels navigateurs prennent en charge clip-path ?

Prise en charge des navigateurs pour clip-path :

Prise en charge complète :
- Chrome 55+
- Firefox 54+
- Safari 9.1+ (peut nécessiter le préfixe -webkit-)
- Edge 79+
- Opera 42+

Pour la compatibilité Safari, ajoutez :
-webkit-clip-path: polygon(...);
clip-path: polygon(...);

Note : clip-path n'affecte pas la mise en page de l'élément - l'élément occupe toujours tout son espace, seule la zone visible change.

Conseil de performance : clip-path déclenche l'accélération GPU, le rendant efficace pour les animations.

Puis-je animer clip-path avec des transitions CSS ?

Oui, mais uniquement entre formes du même type avec le même nombre de points. Animer entre polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) et polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) fonctionne car les deux ont 4 points ; animer d'un polygone de 4 points à un polygone de 6 points NE s'interpole PAS en douceur — le navigateur saute à l'état final. Pour animer entre formes avec des nombres de points différents, définissez la forme la plus petite avec des points adjacents dupliqués (un polygone dégénéré) afin que les deux formes partagent le même nombre de sommets. circle() et ellipse() s'animent proprement vers d'autres cercles et ellipses, et inset() s'anime vers d'autres insets, mais vous ne pouvez pas faire de transition entre différentes fonctions de forme (polygon vers circle). Toutes les animations sont accélérées par GPU et restent fluides à 60fps même sur mobile.

En quoi clip-path diffère-t-il de mask-image, overflow:hidden et SVG clipping ?

Quatre façons de découper des éléments, chacune avec des compromis. clip-path utilise des formes géométriques (polygones, cercles) et donne des bords nets avec anticrénelage ; il est accéléré par GPU et s'anime bien. mask-image utilise le canal alpha d'une image comme masque, prenant donc en charge bords doux, dégradés et masques bitmap arbitraires — mais c'est plus lourd à rendre et moins performant pour les animations. overflow:hidden combiné avec un élément enfant est une astuce qui ne produit que des découpages rectangulaires ; utile pour les anciens navigateurs mais inflexible. SVG <clipPath> est le parent de CSS clip-path et prend en charge des chemins plus complexes y compris des courbes de Bézier, mais nécessite SVG inline et casse l'empilement z-index. Choisissez clip-path pour formes géométriques et animations, mask-image pour effets de bord doux, SVG clipPath pour formes Bézier complexes que CSS ne peut exprimer.

Pourquoi mon clip-path ne fonctionne-t-il pas sur Safari iOS ?

iOS Safari nécessite le préfixe -webkit-clip-path en plus de la propriété clip-path non préfixée, même sur les versions modernes iOS 16+. Deux pièges supplémentaires : (1) Safari n'autorise pas les références url() à des clip paths SVG dans des fichiers externes — le SVG doit être inline dans le même document ; (2) Safari a historiquement eu des bugs avec clip-path sur des éléments ayant un CSS filter ou backdrop-filter appliqué, ignorant parfois entièrement le clip. Utilisez la sortie CSS de cet outil qui inclut à la fois les versions préfixées et non préfixées. Si clip-path échoue toujours sur iOS, assurez-vous que votre élément n'est pas imbriqué dans un parent avec filter, transform-style: preserve-3d ou will-change: transform — ceux-ci peuvent casser le rendu du clip sur WebKit.

Quelle est l'utilité pratique de clip-path dans les designs réels ?

Motifs de production courants : (1) séparateurs de section diagonaux utilisant polygon(0 0, 100% 0, 100% 90%, 0 100%) pour créer des sections de page inclinées sans HTML supplémentaire ; (2) grilles d'avatars hexagonaux utilisant un polygone de 6 points pour les mises en page de photos d'équipe en nid d'abeille ; (3) effets de révélation animés où texte ou images se découvrent depuis un cercle s'étendant depuis un point de clic ; (4) formes de bulle de message pour les UI de chat utilisant un polygone avec une encoche ; (5) mises en page de style Apple conscientes des encoches qui découpent autour des encoches d'appareils ; (6) effets de survol d'images qui se transforment entre deux variantes de forme. Évitez clip-path pour les éléments très grands (>4000px de large) sur les appareils bas de gamme — le coût de rastérisation GPU augmente avec la taille de l'élément. Pour les polygones complexes (>50 points), préférez SVG clipPath qui est plus efficace en mémoire.

Fonctionnalités principales

• 4 types de forme : polygone, cercle, ellipse, inset
• Édition visuelle des points par glisser-déposer
• Importer et modifier une valeur clip-path existante
• La sortie inclut le préfixe -webkit- pour Safari/iOS
• 12 formes de polygone prédéfinies
• Ajouter et supprimer des points de polygone
• Entrée numérique précise pour toutes les valeurs
• Aperçu en direct
• Contrôles de rayon et position du cercle
• Ellipse avec rayons X/Y indépendants
• Inset avec support du rayon de bordure
• Copier le code CSS
• Compatible tactile
• Traitement 100% côté client
• Support du mode sombre
• Interface responsive