CSS Clip-Path Maker
Sleep punten op het canvas om je clip-path vorm te geven. Kies voorinstellingen, wissel van modus, kopieer CSS direct.
① Kies een voorinstelling of sleep de handgrepen ② Wissel tussen polygon, circle en ellipse ③ Kopieer de CSS
VormvoorinstellingenModus
CSS-uitvoer
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Wat is CSS clip-path?
De CSS clip-path-eigenschap maakt een uitsnijgebied dat bepaalt welk deel van een element zichtbaar is. Met polygon() definieer je procentuele coördinaten die een gesloten vorm vormen. circle() en ellipse() maken cirkelvormige of ovale uitsnijdingen mogelijk. clip-path is volledig hardwareversneld en kan worden geanimeerd met CSS-transities.
Veelgestelde vragen
clip-path is een CSS-eigenschap die het zichtbare gebied van een element beperkt tot een gedefinieerde vorm. Alleen pixels binnen het uitsnijgebied worden weergegeven. Gebruikt voor creatieve uitsnijdingen, beeldmaskers en geanimeerde overgangen.
Elk waardepaar in polygon() is een (x%, y%)-coördinaat relatief aan het bounding box van het element. (0% 0%) is de linkerbovenhoek, (100% 100%) de rechteronderhoek.
polygon() accepteert coördinatenparen voor vormen met rechte randen. circle(r at cx cy) maakt een cirkelvormige uitsnijding. ellipse(rx ry at cx cy) een ovale. Alle accepteren procentuele waarden.
.el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. De browser interpoleert elk coördinatenpaar. Verschillende puntaantallen kunnen niet worden geanimeerd.
clip-path met polygon(), circle() en ellipse() wordt volledig ondersteund in Chrome, Edge, Firefox en Safari zonder prefixen. Wereldwijde ondersteuning boven 97%.
Diagonale sectiescheidingen, galerijen met zeshoekige maskers, geanimeerde hero-onthullingen, video-overlays in de vorm van een mockup, interactieve kaartregio's.
CSS clip-path wordt direct toegepast op HTML-elementen en is gemakkelijk te animeren. SVG <clipPath> wordt gedefinieerd in SVG-markup en gerefereerd via clip-path: url(#id). SVG ondersteunt complexe paden en tekst als maskers.