clip-path-generator

Slik fungerer det

clip-path skjærer et element ned til en kontur. Alt utenfor formen tegnes ikke og kan ikke klikkes, noe som gjør den til en ekte form i stedet for et bilde av en – og den fungerer på alle elementer, også bilder og video.

Prosent, ikke piksler

Polygonpunkter oppgis som prosenter av elementets egen bredde og høyde, så formen strekkes med elementet i stedet for å gå i stykker i en annen størrelse. Det er det som gjør den brukbar i en responsiv layout.

Klikk følger formen

Dette er delen som skiller clip-path fra et dekorativt overlegg. Det bortklippede området mottar ingen pekerhendelser i det hele tatt, så en trekantet knapp er trekantet for musen så vel som for øyet.

Animere mellom former

En polygon kan gå jevnt over i en annen polygon bare hvis begge har like mange punkter. Det vanlige trikset er å fylle ut den enkleste formen med dupliserte punkter så antallet stemmer – en trekant skrevet som fire punkter, der to ligger på samme sted, kan morfe til et kvadrat.

Linjen med -webkit-

Gjeldende nettlesere trenger bare egenskapen uten prefiks. Kopien med prefiks er tatt med fordi noen eldre Safari-versjoner fortsatt krever den, og det koster ingenting å la den stå.

Hva den ikke gjør

Den klipper; den flytter ikke om innhold. Tekst rundt behandler fortsatt elementet som det opprinnelige rektangelet. For å få tekst til å brytes rundt en form trenger du shape-outside, som har samme syntaks.