CSS clip-path-generator

De vijf vormfuncties

Veelgebruikte veelhoekuitsnedes

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

De diagonaal in een hero-sectie is waarschijnlijk de meest gebruikte van allemaal: hij geeft een sectie die schuine, moderne uitstraling zonder enige SVG.

clip-path animeren

clip-path animeert zolang beide toestanden dezelfde vormfunctie met hetzelfde aantal punten hebben. Een veelhoek met 4 hoekpunten animeert soepel naar een andere veelhoek met 4 hoekpunten; hoekpunten toevoegen of verwijderen breekt de interpolatie.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Gebruik dit voor onthullingseffecten, subtiele vervormingen bij hover of paginaovergangen.

clip-path versus overflow: hidden

overflow: hidden snijdt af op de rechthoek van de border-box (die met border-radius afgerond kan worden). clip-path snijdt af op elke vorm die u definieert en snijdt alles af, inclusief schaduwen en contouren. Wilt u dat schaduwen buiten de vorm zichtbaar blijven, dan is clip-path niet wat u zoekt.

filter: drop-shadow() kan een vormvolgende schaduw teruggeven aan elementen met clip-path, maar is trager.

Prestaties

clip-path wordt in moderne browsers door de GPU versneld, waardoor geanimeerde clip-paths soepel verlopen. De uitzondering vormen path() en zeer complexe veelhoeken (meer dan 40 hoekpunten), die in sommige browsers terugvallen op CPU-rendering.

Toegankelijkheid

clip-path wijzigt alleen wat zichtbaar is. Schermlezers, toetsenbordfocus en pointergebeurtenissen volgen de volledige box van het element, niet de bijgesneden vorm. Wordt een afbeelding tot een ster bijgesneden, dan wordt de alt-tekst gewoon voorgelezen. Wordt een knop tot een chevron bijgesneden, dan is het klikdoel de volledige rechthoek, niet de zichtbare chevron, wat kan leiden tot per ongeluk klikken op schijnbaar lege ruimte.

Stel bij knoppen met ongebruikelijke bijgesneden vormen de breedte en hoogte van het element strak in, zodat de hitbox redelijk goed overeenkomt met het zichtbare gebied.