01
Prévisualiser le remplacement
Choisir une étoile ou une flèche montre le nombre de points remplacés. Confirmez seulement ensuite ; Annuler restaure votre dessin précédent.
Outils HTML et CSS
générateur de clip-path CSSdéplacer, voir, exporter
Déplacez les sommets du polygone ou réglez une forme simple et observez le CSS produit.
générateur de clip-path CSS
Aperçu de la forme
Résultat CSS
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Les coordonnées et le CSS sont générés dans votre navigateur.
Le CSS est prêt à être copié.
Découper une image en badge ou donner un bord oblique à un bloc demande souvent des essais de coordonnées. Le générateur de clip-path CSS montre immédiatement la nouvelle limite lorsque vous déplacez un sommet.
Avec ce générateur de clip-path CSS, le cercle, l’ellipse et inset disposent aussi de réglages propres. Le code reste lié à la forme visible, et une modification rend l’ancien export indisponible.
Pourquoi utiliser ce générateur de clip-path CSS ?
La découpe et ses valeurs se vérifient avant toute intégration.
Déplacer un sommet sans deviner
Faites glisser un point et observez la frontière découpée. Les champs X et Y servent ensuite à affiner le polygone clip-path CSS au dixième près.
Comparer les unités sans décaler la forme
Les mêmes sommets s’affichent en pourcentage ou en pixels rapportés à un cadre de 320 × 320 px. L’éditeur clip-path polygon conserve la découpe pendant ce changement.
Préparer une forme avant de copier le code
02
Ajuster les sommets et l’unité
Un repère sur chaque bord ajoute un point médian. Les champs X/Y règlent le point choisi ; les pourcentages suivent la taille de l’élément, les pixels le cadre de 320 px.
03
Exporter un résultat à jour
La génération automatique attend un bref arrêt de la saisie. Désactivez-la pour utiliser le bouton ou Ctrl/Cmd + Entrée ; la copie reste bloquée si le résultat est périmé.
Contrôles de forme et de sortie
Quatre formes CSS de base
Polygone, cercle, ellipse et inset ont chacun les réglages utiles : points, rayons, centre, décalages et arrondi.
Sommets modifiables
Ajoutez un point sur un bord, déplacez-le, saisissez ses coordonnées ou prévisualisez sa suppression. Trois points restent toujours au minimum.
Modèles réversibles
Triangle, losange, hexagone, étoile et flèche évitent de repartir de zéro ; une confirmation protège vos points personnalisés.
Déclaration CSS lisible
Cet outil de découpe CSS visuelle fournit un clip-path standard à copier ou à enregistrer dans un fichier CSS.
Ce que la découpe change réellement
- Pixels liés au cadre de référence
- Les coordonnées en px sont calculées pour 320 × 320 px. Utilisez les pourcentages si la forme doit suivre une autre taille ; un même polygone ne mélange pas les unités.
- Pas de lecture de CSS arbitraire
- Le générateur de formes CSS ne charge pas un path(), shape(), une référence SVG ou des valeurs calc(). La zone de code montre uniquement le résultat.
- La boîte de mise en page reste
- clip-path masque le dessin sans réduire la place réservée dans la page. L’ombre box-shadow de l’élément peut être découpée avec lui.
- Pas de fichier image ni d’animation
- Ni import photo, ni PNG/SVG découpé, ni transition hover ne sont produits. Une animation de polygones exige le même nombre de points aux deux extrémités.
Questions sur le générateur de clip-path CSS
Comment ajouter ou déplacer les points d'un polygone ?
Cliquez un repère au milieu d’un bord pour ajouter un point ; déplacez ensuite le sommet ou saisissez ses coordonnées. La suppression affiche d’abord un aperçu.
clip-path affecte-t-il la taille de mise en page de l'élément ?
Non. La propriété masque une partie du rendu, mais la boîte initiale de l’élément conserve sa place dans la mise en page.
Pourquoi mon box-shadow n'apparaît-il pas sur ma forme découpée ?
L’ombre dessinée par le même élément est aussi soumise à la découpe. Appliquez-la à un conteneur extérieur pour la garder visible.
Puis-je animer une forme clip-path ?
La propriété CSS peut s’animer entre formes compatibles, mais l’outil ne produit qu’un état statique. Les polygones à interpoler doivent avoir autant de sommets.
Quelle différence entre clip-path et border-radius ?
border-radius arrondit les coins de la boîte ; clip-path définit une région visible arbitraire. Un polygon() reste composé de segments droits.
Un problème de forme ou de coordonnées ?
Essayer le générateur de clip-path CSS
Choisissez une forme, déplacez ses sommets et vérifiez le code avant de l’utiliser dans votre projet.
Retrouvez ce générateur de clip-path CSS pour la prochaine bordure oblique ou découpe géométrique.
Généré dans votre navigateur.