Developer Tools
Design Tools
Web UtilitiesGénérateur de Clip Path CSS
Créez des clip-path CSS pour polygones, cercles et ellipses avec un éditeur visuel par glisser-déposer. Utilisez des préréglages pour les formes courantes comme les flèches, triangles et étoiles. Copiez le CSS instantanément.
Point 1
Point 2
Point 3
Point 4
Propriété CSS
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Valeur CSS
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)Outils Connexes
À Propos de Cet Outil
Comment Ça Marche
- Choisissez un type de forme : polygone, cercle ou ellipse
- Faites glisser les points de contrôle sur le canevas d'aperçu pour remodeler le clip path
- Ajustez les paramètres avec les curseurs et les saisies pour un contrôle précis
- Copiez la valeur CSS clip-path générée pour l'utiliser dans vos feuilles de style
- Utilisez des préréglages pour les formes courantes comme les flèches, triangles et étoiles
- Prévisualisez le clip path appliqué à une vraie image ou à un fond de couleur unie
Cas d'Utilisation Courants
- Créer des recadrages d'image non rectangulaires pour les sections hero
- Construire des séparateurs de section diagonaux ou en chevron
- Concevoir des photos de profil ou des badges en forme de polygone
- Créer des masques d'image géométriques pour les galeries
- Construire des boutons d'appel à l'action en forme de flèche
- Concevoir des cartes UI et infobulles avec des formes personnalisées
Questions Fréquemment Posées
Qu'est-ce que CSS clip-path ?
La propriété CSS clip-path vous permet de définir une zone de rognage pour un élément — seule la partie à l'intérieur de la zone est visible, tout ce qui est en dehors est masqué. Elle prend en charge les formes comme polygon(), circle(), ellipse() et path(), permettant de créer des éléments non rectangulaires, des séparateurs diagonaux et des masques d'image géométriques.
Comment faire glisser les points de contrôle dans l'aperçu ?
Lorsque le type de forme Polygone est sélectionné, des poignées circulaires bleues apparaissent sur le canevas d'aperçu à chaque sommet du polygone. Cliquez et faites glisser n'importe quelle poignée pour la repositionner. La sortie CSS se met à jour instantanément pendant le glissement.
Que signifient les pourcentages X et Y ?
Les coordonnées du polygone clip-path sont exprimées en pourcentages de la largeur et de la hauteur de l'élément. 0% 0% est le coin supérieur gauche, 100% 0% est le supérieur droit, 100% 100% est l'inférieur droit, et 0% 100% est l'inférieur gauche.
Comment ajouter ou supprimer des points de polygone ?
Utilisez le bouton "+ Ajouter un point" pour ajouter un nouveau point de contrôle au centre (50% 50%), puis faites-le glisser ou modifiez ses valeurs X/Y. Pour supprimer un point, cliquez sur "− Supprimer" à côté. Un polygone nécessite au moins 3 points.
Quelles formes prédéfinies sont disponibles ?
L'outil comprend 12 préréglages de polygone : Triangle, Diamant, Flèche Droite, Flèche Gauche, Pentagone, Hexagone, Étoile, Chevron, Inclinaison Gauche, Inclinaison Droite, Biseau et Rainure.
Comment fonctionne le clip-path de cercle ?
La sélection du type de forme Cercle génère une valeur clip-path: circle(r% at cx% cy%). Le curseur de rayon contrôle la taille du cercle, et les curseurs de centre X/Y déplacent son point central.
Quelle est la différence entre cercle et ellipse ?
Un clip-path de cercle prend un seul rayon, produisant une forme de rognage parfaitement ronde. Un clip-path d'ellipse prend des valeurs séparées de rayon X (rx) et rayon Y (ry), permettant de créer des formes ovales.
Comment copier le CSS généré ?
Il y a deux boutons de copie dans la section Sortie CSS. "Copier CSS" copie la règle CSS complète avec le sélecteur .element. "Copier la valeur" copie uniquement la valeur clip-path pour la coller dans une règle existante.
Le clip-path est-il supporté dans tous les navigateurs ?
CSS clip-path avec les formes de base (polygon, circle, ellipse) est bien supporté dans tous les navigateurs modernes : Chrome, Firefox, Safari et Edge. La propriété ne nécessite pas de préfixes de vendeur pour les formes de base.
Puis-je animer des formes clip-path ?
Oui ! CSS clip-path peut être transitionné et animé en douceur entre des formes du même type avec le même nombre de points. Par exemple : "transition: clip-path 0.4s ease".
Comment utiliser clip-path pour les séparateurs de section ?
Appliquez un polygone clip-path à un élément de section pleine largeur pour créer des transitions diagonales ou en chevron entre les sections de la page. Utilisez les préréglages Inclinaison Gauche ou Droite comme point de départ.
Qu'est-ce que l'option d'image d'arrière-plan d'aperçu ?
Lorsque vous basculez l'arrière-plan d'aperçu sur "Image", l'aperçu se remplit d'un dégradé (indigo vers rose) au lieu d'une couleur unie. Cela vous aide à voir comment le clip-path apparaîtrait appliqué à une photo ou un arrière-plan riche.