CSS Clip-Path Maker
Glissez des points sur le canvas pour modeler votre clip-path. Choisissez des préréglages, changez de mode, copiez le CSS.
① Choisissez un préréglage ou faites glisser ② Basculez entre polygon, circle et ellipse ③ Copiez le CSS
Préréglages de formeMode
Sortie CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Qu'est-ce que CSS clip-path ?
La propriété CSS clip-path crée une région de découpe contrôlant quelle partie d'un élément est visible. Avec polygon(), vous définissez des coordonnées en pourcentage formant une forme fermée. circle() et ellipse() permettent des découpes circulaires ou ovales. clip-path est entièrement accéléré matériellement et peut être animé avec des transitions CSS.
Questions Fréquentes
clip-path est une propriété CSS qui restreint la zone visible d'un élément à une forme définie. Seuls les pixels à l'intérieur de la région de découpe sont rendus. Utilisé pour des découpes créatives, des masques d'image et des transitions animées.
Chaque paire de valeurs dans polygon() est une coordonnée (x%, y%) relative au bounding box de l'élément. (0% 0%) est le coin supérieur gauche, (100% 100%) l'inférieur droit.
polygon() accepte des paires de coordonnées pour des formes à bords droits. circle(r at cx cy) crée un découpage circulaire. ellipse(rx ry at cx cy) un ovale. Tous acceptent des valeurs en pourcentage.
.el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. Le navigateur interpole chaque paire de coordonnées. Des comptes de points différents ne peuvent pas être animés.
clip-path avec polygon(), circle() et ellipse() est entièrement supporté dans Chrome, Edge, Firefox et Safari sans préfixes. Support mondial supérieur à 97%.
Séparateurs de sections diagonaux, galeries avec masques hexagonaux, révélations animées du hero, overlays vidéo en forme de maquette, régions de carte interactives.
CSS clip-path s'applique directement aux éléments HTML et est facile à animer. SVG <clipPath> est défini dans le markup SVG et référencé via clip-path: url(#id). SVG supporte des chemins complexes et du texte comme masques.