Clip-path-generator (CSS-former)

Slik bruker du clip-path-generatoren

1. Velg en Form: Polygon, Sirkel, Ellipse eller Innrykk. Det bleke laget viser hele elementet, det lyse laget viser det som er synlig etter beskjæringen.
2. Dra i prikkene i editoren. For en polygon er hver prikk et hjørne. Klikk hvor som helst i området for å legge til et punkt på nærmeste kant. For en sirkel eller en ellipse drar du midtpunktet og radiusprikkene. For et innrykk drar du de fire kantprikkene.
3. Finjuster i feltene under: listen Punkter (X og Y i prosent, med Fjern og Legg til punkt) for polygoner, eller feltene Radius, Midtpunkt X, Midtpunkt Y, Topp, Høyre, Bunn, Venstre og Avrundede hjørner (px) for de andre formene.
4. Kom raskere i gang med Forhåndsinnstillinger: trekant, trapes, parallellogram, rombe, femkant, sekskant, åttekant, avfasing, stjerne, kors, piler, chevron, snakkeboble, sirkel, ellipse og innrykk.
5. Huk av for Lås til 5 % for ryddige verdier, og for Legg til -webkit-clip-path (gammel Safari) hvis du fortsatt støtter Safari 13.0 eller eldre.
6. Du kan også slippe et foto i Bakgrunnsbilde (valgfritt) for å se formen på ditt eget bilde. Filen lastes aldri opp.
7. Kopier CSS-kode med Kopier.

Tastatur: sett en prikk i fokus, flytt den med piltastene (1 %, eller 10 % med Shift) og trykk Delete for å fjerne et polygonpunkt. En polygon beholder alltid minst tre punkter.

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Formfunksjonene i clip-path

clip-path skjuler alt utenfor en form. Elementet beholder størrelsen sin i layouten. Det er bare tegningen og det klikkbare området som beskjæres.

• polygon(x1 y1, x2 y2, …) forbinder punktene i rekkefølge og lukker formen. polygon(50% 0%, 100% 100%, 0% 100%) er en trekant som peker oppover. Koordinatene starter i øvre venstre hjørne av elementet.
• circle(r at cx cy): circle(50% at 50% 50%) er den største sirkelen midt i elementet. En radius i prosent er relativ til diagonalen delt på √2, så den tilsvarer en andel av bredden bare for kvadratiske elementer.
• ellipse(rx ry at cx cy): den horisontale radiusen er en andel av bredden, den vertikale en andel av høyden.
• inset(top right bottom left round radius) skjærer ut et rektangel innenfor kantene, med samme korte skrivemåte med én til fire verdier som for marger og eventuelt avrundede hjørner.

Dette verktøyet skriver prosentverdier, så formen skalerer med elementet uansett størrelse.

Tips for gode former

• Rekkefølgen på polygonpunktene betyr noe: gå rundt kanten med eller mot klokken, så unngår du krysset «sløyfeform».
• To former med like mange punkter kan animeres: transition: clip-path 0.4s morfer en sekskant jevnt over i en annen sekskant. Nettleseren kan ikke interpolere mellom polygoner med ulikt antall punkter.
• clip-path beskjærer også box-shadow og kanter. For å gi en beskåret form skygge setter du filter: drop-shadow() på et overordnet element.
• Beskårne områder får ikke klikk eller hover, noe som er praktisk for uregelmessige knapper.