clip-path-generator

Så fungerar det

clip-path skär ner ett element till en kontur. Allt utanför formen ritas inte och går inte att klicka på, vilket gör det till en verklig form snarare än en bild av en — och det fungerar på vilket element som helst, inklusive bilder och video.

Procent, inte pixlar

Polygonpunkter anges som procent av elementets egen bredd och höjd, så formen sträcks med elementet i stället för att gå sönder vid en annan storlek. Det är det som gör den användbar i en responsiv layout.

Klick följer formen

Det här är den del som skiljer clip-path från ett dekorativt överlägg. Det bortbeskurna området får inga pekarhändelser alls, så en triangulär knapp är triangulär för musen såväl som för ögat.

Animering mellan former

En polygon kan övergå mjukt i en annan polygon bara om båda listar samma antal punkter. Det vanliga tricket är att fylla ut den enklare formen med dubbla punkter så att antalen stämmer — en triangel skriven som fyra punkter där två ligger på samma plats kan övergå i en kvadrat.

Raden med -webkit-

Aktuella webbläsare behöver bara egenskapen utan prefix. Den prefixerade kopian finns med eftersom vissa äldre Safari-versioner fortfarande kräver den och det kostar ingenting att låta den vara kvar.

Vad den inte gör

Den beskär; den flödar inte om. Omgivande text behandlar fortfarande elementet som sin ursprungliga rektangel. För att få text att radbrytas runt en form vill du ha shape-outside, som har samma syntax.