Clip-path-generator

Sådan bruger du clip-path-generatoren

1. Vælg en Form: Polygon, Cirkel, Ellipse eller Inset. Det blege lag viser hele elementet, det klare lag viser det, der forbliver synligt efter beskæringen.
2. Træk i prikkerne i editoren. For en polygon er hver prik et hjørne. Klik et vilkårligt sted i området for at tilføje et punkt på den nærmeste kant. For en cirkel eller en ellipse trækker du i centrum og radiusprikkerne. For et inset trækker du i de fire kantprikker.
3. Finjustér i felterne nedenunder: listen Punkter (X og Y i procent, med Fjern og Tilføj punkt) til polygoner eller felterne Radius, Centrum X, Centrum Y, Top, Højre, Bund, Venstre og Afrundede hjørner (px) til de andre former.
4. Kom hurtigere i gang med Forudindstillinger: trekant, trapez, parallelogram, rombe, femkant, sekskant, ottekant, affaset, stjerne, kors, pile, chevron, taleboble, cirkel, ellipse og inset.
5. Sæt kryds i Fastgør til 5 % for pæne værdier og i Tilføj -webkit-clip-path (gammel Safari), hvis du stadig skal understøtte Safari 13.0 eller ældre.
6. Du kan evt. slippe et foto i Baggrundsbillede (valgfrit) for at se formen på dit eget billede. Filen uploades aldrig.
7. Kopiér CSS-kode med Kopiér.

Tastatur: giv en prik fokus, flyt den med piletasterne (1 %, eller 10 % med Shift), og tryk på Delete for at fjerne et polygonpunkt. En polygon beholder mindst tre punkter.

Formfunktionerne i clip-path

clip-path skjuler alt uden for en form. Elementet beholder sin størrelse i layoutet. Det er kun tegningen og det klikbare område, der beskæres.

• polygon(x1 y1, x2 y2, …) forbinder punkterne i rækkefølge og lukker formen. polygon(50% 0%, 100% 100%, 0% 100%) er en trekant, der peger opad. Koordinaterne starter i elementets øverste venstre hjørne.
• circle(r at cx cy): circle(50% at 50% 50%) er den største cirkel, der kan centreres i elementet. En radius i procent er relativ til elementets diagonal divideret med √2, så den kun svarer til en andel af bredden for kvadratiske elementer.
• ellipse(rx ry at cx cy): den vandrette radius er en andel af bredden, den lodrette en andel af højden.
• inset(top right bottom left round radius) skærer et rektangel inde fra kanterne, med samme genvej på en til fire værdier som margener og valgfri afrundede hjørner.

Værktøjet skriver procenter, så formen skalerer med elementet, uanset størrelse.

Tips til gode former

• Rækkefølgen af polygonpunkter har betydning: hvis du går rundt langs kanten med uret (eller mod uret), undgår du krydsede former som en sløjfe.
• To former med lige mange punkter kan animeres: transition: clip-path 0.4s morfer en sekskant glidende over i en anden sekskant. Browseren kan ikke interpolere mellem polygoner med forskelligt antal punkter.
• clip-path beskærer også box-shadow og kanter. Hvis du vil give en beskåret form en skygge, skal du sætte filter: drop-shadow() på et forælderelement.
• Beskårne områder modtager hverken klik eller svævning, hvilket er praktisk til uregelmæssige knapper.

Værktøjet virker i din browser, og intet, du indtaster, sendes til en server.