Createur CSS Clip-path

Createur CSS Clip-path - Generateur Visuel de Formes

Creez des formes CSS clip-path complexes visuellement. Cet outil prend en charge les polygones, cercles, ellipses et inset avec une interface intuitive de glisser-deposer pour les points de polygone.

Qu'est-ce que CSS clip-path?

CSS clip-path est une propriete qui cree une region de decoupage pour definir quelles parties d'un element sont visibles. Les parties en dehors de la region de decoupage sont cachees.

Types de forme:

polygon() - Formes personnalisees avec plusieurs points
circle() - Decoupage circulaire
ellipse() - Decoupage ovale
inset() - Rectangulaire avec coins arrondis optionnels

Comment creer un clip-path polygone?

Le clip-path polygone utilise des points de coordonnees:

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

Chaque point est defini par des pourcentages X et Y:
- 0% 0% = coin superieur gauche
- 100% 0% = coin superieur droit
- 100% 100% = coin inferieur droit
- 0% 100% = coin inferieur gauche

Comment fonctionnent cercle et ellipse?

Syntaxe du cercle:
circle(rayon at centreX centreY)

Exemple: circle(50% at 50% 50%)
- Cree un cercle avec un rayon de 50%
- Centre a 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 cree un decoupage rectangulaire avec des coins arrondis optionnels:

Syntaxe: inset(haut droite bas gauche round rayon)

Les valeurs representent le retrait de chaque bord:
- inset(10%) - 10% de tous les cotes
- inset(10% 20%) - 10% haut/bas, 20% gauche/droite

Fonctionnalites principales

• 4 types de forme: polygone, cercle, ellipse, inset
• Edition visuelle des points par glisser-deposer
• 12 formes de polygone predefinies
• Ajouter et supprimer des points de polygone
• Entree numerique precise pour toutes les valeurs
• Apercu en direct
• Controles de rayon et position du cercle
• Ellipse avec rayons X/Y independants
• Inset avec support du rayon de bordure
• Copier le code CSS
• Compatible tactile
• Traitement 100% cote client
• Support du mode sombre
• Interface responsive