clip-path-generator

Sådan fungerer det

clip-path skærer et element ned til en kontur. Alt uden for formen tegnes ikke og kan ikke klikkes på, hvilket gør den til en ægte form frem for et billede af en – og den virker på ethvert element, også billeder og video.

Procenter, ikke pixel

Polygonpunkter angives som procenter af elementets egen bredde og højde, så formen strækker sig med elementet i stedet for at gå i stykker ved en anden størrelse. Det er det, der gør den brugbar i et responsivt layout.

Klik følger formen

Det er den del, der adskiller clip-path fra et dekorativt overlay. Det bortklippede område modtager slet ikke pointer-hændelser, så en trekantet knap er trekantet for musen såvel som for øjet.

Animation mellem former

En polygon kan kun glide jævnt over i en anden polygon, hvis begge angiver det samme antal punkter. Det sædvanlige trick er at fylde den enklere form op med dobbeltpunkter, så antallet passer – en trekant skrevet som fire punkter, hvor to ligger det samme sted, kan morphe til et kvadrat.

Linjen med -webkit-

Aktuelle browsere har kun brug for egenskaben uden præfiks. Kopien med præfiks er med, fordi nogle ældre Safari-versioner stadig kræver den, og det koster intet at lade den blive.

Hvad den ikke gør

Den klipper; den omformaterer ikke. Omgivende tekst behandler stadig elementet som dets oprindelige rektangel. For at få tekst til at ombryde omkring en form skal du bruge shape-outside, som har den samme syntaks.