clip-path met polygon() en circle()

clip-path beperkt het zichtbare gebied van een element tot een opgegeven vorm. Alles buiten de vorm is onzichtbaar, maar neemt nog steeds ruimte in de lay-out in.

Beperk een element tot een cirkelvorm. Het argument is de straal:

Beperk een element tot een ellips door de x-straal, y-straal en optionele middenpositie op te geven:

De krachtigste clip-path-functie. Definieer een veelhoek door paren van x,y-coördinaten op te sommen:

Beperk een element tot een rechthoek met optioneel afgeronde hoeken. De argumenten zijn afstanden vanaf de randen:

Maak schuine overgangen tussen secties van een pagina:

Je kunt clip-path met hetzelfde aantal punten laten overgaan voor animaties waarin iets wordt onthuld of vervormd:

Voor eenvoudige afgeronde vormen is border-radius beter — het werkt met achtergronden en randen. Gebruik clip-path wanneer je niet-rechthoekige vormen nodig hebt die je met border-radius niet kunt maken.

path() accepteert een SVG-padtekenreeks voor willekeurige vormen:

clip-path maakt een nieuwe stapelcontext en kan bij animatie bij elk frame opnieuw laten tekenen. clip-path animeren kost meer dan transform of opacity — combineer dit zorgvuldig.

Het coördinatensysteem voor clip-path is het border box van het element (of het margin box voor SVG). Percentages zijn relatief aan de afmetingen van het element.

clip-path beperkt elementen tot geometrische vormen. circle() en ellipse() maken ronde uitsneden. Met polygon() definieer je elke vorm met meerdere hoekpunten. inset() beperkt een element tot een rechthoek met optioneel afgeronde hoeken. Animeer tussen veelhoekvormen met hetzelfde aantal punten voor spectaculaire onthullingen. Gebruik path() voor willekeurige vormen op basis van SVG.