Clip-path-generator

Så använder du clip-path-generatorn

1. Välj en Form: Polygon, Cirkel, Ellips eller Inset. Det bleka lagret visar hela elementet, det ljusa visar vad som syns efter klippningen.
2. Dra punkterna i redigeraren. För en polygon är varje punkt ett hörn; klicka var som helst i ytan för att lägga till en punkt på närmaste kant. För en cirkel eller en ellips drar du mittpunkten och radiepunkterna. För inset drar du de fyra kantpunkterna.
3. Finjustera i fälten nedanför: listan Punkter (X och Y i procent, med Ta bort och Lägg till punkt) för polygoner, eller fälten Radie, Mitt X, Mitt Y, Överkant, Höger, Nederkant, Vänster och Rundade hörn (px) för de andra formerna.
4. Kom igång snabbare med Förinställningar: triangel, parallelltrapets, parallellogram, romb, femhörning, sexhörning, åttahörning, avfasad, stjärna, kors, pilar, chevron, pratbubbla, cirkel, ellips och inset.
5. Kryssa i Fäst vid 5 % för jämna värden, och Lägg till -webkit-clip-path (äldre Safari) om du fortfarande stöder Safari 13.0 eller äldre.
6. Släpp gärna ett foto i Bakgrundsbild (valfri) för att se formen på din egen bild. Filen laddas aldrig upp.
7. Kopiera CSS-kod med Kopiera.

Tangentbord: ge en punkt fokus, flytta den med piltangenterna (1 %, eller 10 % med Shift) och tryck på Delete för att ta bort en polygonpunkt. En polygon behåller alltid minst tre punkter.

Formfunktionerna i clip-path

clip-path döljer allt utanför en form. Elementet behåller sin storlek i layouten; det är bara det som målas och den klickbara ytan som klipps.

• polygon(x1 y1, x2 y2, …) förbinder punkterna i tur och ordning och sluter formen. polygon(50% 0%, 100% 100%, 0% 100%) är en triangel som pekar uppåt. Koordinaterna utgår från elementets övre vänstra hörn.
• circle(r at cx cy): circle(50% at 50% 50%) är den största cirkeln centrerad i elementet. En radie i procent räknas från elementets diagonal delad med √2, så den motsvarar en andel av bredden bara för kvadratiska element.
• ellipse(rx ry at cx cy): den horisontella radien är en andel av bredden, den vertikala en andel av höjden.
• inset(top right bottom left round radius) skär ut en rektangel innanför kanterna, med samma förkortning med ett till fyra värden som för marginaler och valfria rundade hörn.

Verktyget skriver procentvärden, så formen skalas med elementet oavsett storlek.

Tips för snygga former

• Ordningen på polygonens punkter spelar roll: om du går runt kanten medurs (eller moturs) undviker du korsade ”fluga”-former.
• Två former med samma antal punkter kan animeras: transition: clip-path 0.4s förvandlar mjukt en sexhörning till en annan sexhörning. Webbläsaren kan inte interpolera mellan polygoner med olika antal punkter.
• clip-path klipper även box-shadow och ramar. Vill du ge en klippt form en skugga lägger du filter: drop-shadow() på ett föräldraelement.
• Klippta ytor tar inte emot klick eller hovring, vilket är praktiskt för oregelbundna knappar.