Percentages, geen pixels

Een polygoon in procenten is resolutie-onafhankelijk: de vorm blijft staan als het element 200px breed is en als het 900px breed is, en dat is op een responsieve lay-out het verschil tussen een vorm en een bug. Diezelfde polygoon in pixels is die vorm niet meer zodra de lay-out beweegt. Pixels blijven hier beschikbaar omdat een vaste inkeping van 24px een echte eis is, maar ze zijn de uitzondering en de tool zegt dat als je overschakelt.

Percentages worden gemeten tegen het referentievak, horizontaal voor x en verticaal voor y, en dat betekent dat een vorm op een breed element uitgerekt is vergeleken met dezelfde vorm op een vierkant. Dat is bij een banner meestal wat je wilt en bij een icoon nooit. Maak het element vierkant voor een icoon.

Punten buiten het vak zijn toegestaan

Een hoekpunt op -20% 130% is geldig, en zo laat je een rand van het element aflopen in plaats van precies een hoek te raken. Niets hier begrenst daarom een coördinaat. De handgrepen zijn niet buiten het vlak te slepen, dus de vakken X en Y in de zijbalk zijn waar je die typt, en ook daarom bestaan ze naast een sleepeditor.

De vier functies zijn niet uitwisselbaar

polygon() neemt een willekeurig aantal hoekpunten en is het algemene geval. circle() en ellipse() zijn bochten die een polygoon alleen kan benaderen, en ze animeren vloeiend waar een polygoon dat niet doet. inset() is een rechthoek met optioneel afgeronde hoeken, en die pak je als je een marge wegsnijdt in plaats van een vorm maakt: hij klapt in zoals margin doet, en zijn trefwoord round neemt een volledige waarde voor border-radius.

Eén regel bepaalt het animeren tussen vormen: twee waarden polygon() interpoleren alleen als ze evenveel hoekpunten hebben, in dezelfde volgorde. Een vorm van vijf punten gaat niet vloeiend over in een van zes; hij springt. De gebruikelijke omweg is de simpelste vorm een dubbel hoekpunt geven zodat beide kanten hetzelfde aantal hebben.

Veelvoorkomende problemen

De vorm heeft kartelige randen.clip-path wordt niet altijd anti-aliased, vooral niet op flauwe diagonalen in sommige browsers. Een filter: drop-shadow(0 0 0 transparent) of een transformatie die het element naar zijn eigen laag tilt maakt het meestal glad, ten koste van een tekenlaag.
Klikken landen nog steeds op de weggeknipte hoeken. Dat doen ze eigenlijk niet: clip-path knipt ook het aanklikken af. Krijg je daar toch klikken, dan is het doelwit een ouderelement en niet het afgeknipte element.
De box-shadow is verdwenen. Hij wordt afgeknipt, net als al het andere buiten de vorm. Zet de schaduw op een ouder met filter: drop-shadow(), want die volgt de afgeknipte omtrek in plaats van het vak.
Tekst erbinnen wordt afgesneden. Afknippen laat de inhoud niet opnieuw lopen. Voeg opvulling toe, of gebruik shape-outside met dezelfde waarde zodat de tekst om de vorm heen loopt in plaats van eronder door.

Veelgestelde vragen

Kan ik dit zonder muis gebruiken?

Ja. Elk hoekpunt is een echte knop: tab ernaartoe, verplaats hem met de pijltoetsen, houd shift vast voor een grotere stap. De zijbalk toont de coördinaten van het gekozen punt als getallen en neemt getypte waarden aan, ook waarden buiten het element.

Wat is het referentievak?

Standaard de border box. clip-path accepteert een trefwoord voor het vak vóór de vorm, dus clip-path: padding-box circle(50%) meet in plaats daarvan tegen de padding box. Het telt zodra het element een rand heeft, en het is een van de minst bekende delen van de property.

Werkt het op afbeeldingen en video?

Op elk element, <img>, <video> en een hele container met inhoud erin inbegrepen. Het afknippen geldt voor de weergave van het element als geheel, dus kinderen worden samen met de achtergrond afgeknipt.

En vormen die een polygoon niet kan tekenen?

clip-path neemt ook path() met een SVG-padstring, en dat geeft je bochten en gaten. Het is niet te interpoleren tegen een polygoon en kan geen percentages gebruiken, dus het is een ander gereedschap voor een andere klus: teken het met de hand in een vectorprogramma en plak het attribuut d.