CSS Clip-Path Generator

Dette verktøyet genererer en CSS clip-path-verdi ut fra en forhåndsdefinert form — sirkel, ellipse, trekant, femkant, sekskant, stjerne eller avrundet rektangel — og viser den klipte formen live i en forhåndsvisningsboks før du kopierer CSS-en. Du slipper å regne ut polygon()-koordinater for hånd for vanlige former.

Hva er dette verktøyet?

clip-path er CSS-egenskapen som skjuler alt utenfor et definert område av et element, slik at kun formen inni er synlig — resten av elementets boks ligger fortsatt der i layouten, den blir bare ikke tegnet. Egenskapen tar imot grunnleggende formfunksjoner som circle(), ellipse(), inset() og polygon(), hvor sistnevnte tar en vilkårlig liste med x/y-koordinatpar for å definere enhver rettlinjet form.

polygon()-koordinater er den vanskeligste delen å skrive for hånd — en femkant, sekskant eller stjerne krever hver flere presist plasserte punkter, og ett feilplassert punkt forvrenger hele formen. Dette verktøyet beregner disse koordinatene for deg ut fra en forhåndsdefinert form, oppdaterer forhåndsvisningen umiddelbart, og gir deg den eksakte clip-path-CSS-en du kan kopiere.

Kilde: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — spesifikasjonene som definerer clip-path og de grunnleggende formfunksjonene.

Hvorfor bruke det?

Live forhåndsvisning klipper en faktisk forhåndsvisningsboks til den valgte formen, slik at du ser det reelle resultatet i stedet for å forestille deg det ut fra koordinater.
Sju forhåndsdefinerte former — sirkel, ellipse, trekant, femkant, sekskant, stjerne og avrundet rektangel — dekker de aller fleste bruksområder for clip-path uten å måtte skrive polygon-punkter for hånd.
Sirkel-, ellipse- og avrundet-rektangel-formene har en glider for størrelse/avrunding, slik at du kan finjustere formen uten å redigere koordinater.
Genererer standard clip-path-CSS klar til å limes inn på ethvert element.
Kjører helt i nettleseren din — ingenting du konfigurerer blir lastet opp noe sted. Gratis, ingen registrering, fungerer på mobil.

Slik bruker du det

Velg en form fra nedtrekksmenyen — sirkel, ellipse, trekant, femkant, sekskant, stjerne eller avrundet rektangel.
For sirkel, ellipse og avrundet rektangel: juster glideren for størrelse/avrunding for å finjustere klippet.
Se forhåndsvisningsboksen oppdatere seg live mens du endrer form eller glider.
Kopier den genererte clip-path-CSS-en og lim den inn på elementet du vil klippe.
For et bilde i stedet for en ensfarget flate: bruk samme clip-path-egenskap på et <img>-element eller et element med background-image.

Eksempel

Inndata

Form: Sekskant

Resultat

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Et regulært sekskantklipp, ofte brukt til badge-lignende profilbilder eller funksjonsikoner.

Grunnleggende former vs. polygon()

Sirkel, ellipse og inset (avrundet rektangel) er innebygde CSS-formfunksjoner med sin egen enkle syntaks — en eller to radiuser, pluss en valgfri senterposisjon eller hjørneavrunding. Trekant, femkant, sekskant og stjerne er ikke innebygde former; de uttrykkes alle med polygon(), en flat liste av x/y-koordinatpar som tegner formens omriss. Dette verktøyet beregner automatisk disse koordinatene for regulære (jevnt fordelte) polygoner og en femtakket stjerne, som er den kjedelige delen å få riktig for hånd.

Vanlige clip-path-mønstre

Rund avatar eller badge: circle() med en middels radius, ofte kombinert med et kvadratisk kildebilde slik at sirkelen ikke strekkes til en ellipse.
Skrå seksjonsdeler: en tilpasset polygon (ikke inkludert som forhåndsvalg her) som skråstiller topp- eller bunnkanten av en fullbredde-seksjon for en ikke-rektangulær sideovergang.
Stjerne-ikon eller badge-form: stjerneforhåndsvalget, nyttig som en dekorativ form fremfor en håndtegnet SVG for enkle tilfeller.
Sekskantet bildegrid: sekskant-klipte bilder arrangert i et bikube-mønster, et vanlig mønster på portefølje- og teamsider.
Avrundet rektangel som et lettvekts-alternativ til border-radius når klippet også må kutte overflytende barneinnhold, siden border-radius alene ikke klipper barn uten ekstra overflow:hidden.

Kombinasjon med andre CSS-verktøy

clip-path brukes ofte sammen med en CSS-gradient som bakgrunnen som klippes, eller med en box-shadow lagt på et omsluttende element (siden clip-path også klipper elementets egen skygge, er en skygge på et foreldreelement den vanlige løsningen for en klippet form som likevel skal virke som den flyter).

→ CSS Gradient-generator · Border Radius-generator · Box Shadow-generator

Ofte stilte spørsmål

Påvirker clip-path elementets layout-størrelse?

Nei — elementet beholder sin opprinnelige boksstørrelse og posisjon for layout-formål; clip-path endrer bare hva som tegnes. Omkringliggende elementer plasseres som om klippet ikke var lagt til, noe som kan overraske hvis du forventer at den klipte formen skal oppføre seg som et endret element.

Hvorfor vises ikke box-shadow på den klipte formen min?

clip-path klipper hele elementets rendering, inkludert enhver skygge det kaster, så box-shadow på et element klipt med circle- eller polygon-form kuttes av ved klippegrensen. For å få en skygge som følger den synlige formen, legg box-shadow på et uklippet omsluttende element rundt det klipte i stedet.

Kan jeg animere eller overgang en clip-path-form?

Ja, men bare mellom to clip-path-verdier av samme type og med samme antall punkter — for eksempel én polygon() med 6 punkter som går over til en annen polygon() med 6 punkter. Overgang mellom grunnleggende forskjellige former (en circle() til en polygon()) vil generelt ikke animere jevnt på tvers av nettlesere.

Kan clip-path brukes på bakgrunnsbilder, ikke bare elementinnhold?

clip-path klipper hele elementet — inkludert background-image, background-color, kanter og innhold samlet — snarere enn bare bakgrunnen spesifikt. Hvis du bare vil klippe et bakgrunnsbilde og la annet innhold være uklippet, bruk clip-path på et separat element som kun holder bakgrunnen.

Støttes clip-path i alle moderne nettlesere?

Ja — clip-path med grunnleggende formfunksjoner (circle, ellipse, inset, polygon) har vært Baseline widely available på tvers av store nettlesere siden januar 2020, ifølge MDNs kompatibilitetsdata. Det er generelt trygt å bruke i produksjon uten fallback for gjeldende nettleserversjoner.