CSS Clip-Path Generator

Dette værktøj genererer en CSS clip-path-værdi ud fra en formforudindstilling — cirkel, ellipse, trekant, femkant, sekskant, stjerne eller et afrundet rektangel — og viser den klippede form live på en forhåndsvisningsboks, før du kopierer CSS'en. Ingen grund til at regne polygon()-koordinater ud i hånden for almindelige former.

Hvad er dette værktøj?

clip-path er den CSS-egenskab, der skjuler alt uden for et defineret område af et element og kun lader formen indeni være synlig — resten af elementets boks er stadig der i layoutet, den tegnes bare ikke. Den accepterer basale formfunktioner som circle(), ellipse(), inset() og polygon(), hvor sidstnævnte tager en vilkårlig liste af x/y-koordinatpar for at definere enhver ligekantet form.

polygon()-koordinater er den sværeste del at skrive i hånden — en femkant, sekskant eller stjerne kræver hver flere præcist placerede punkter, og ét forkert punkt forvrænger hele formen. Dette værktøj beregner disse koordinater for dig ud fra en formforudindstilling, opdaterer den live forhåndsvisning øjeblikkeligt og giver dig den præcise clip-path-CSS at kopiere.

Kilde: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikationerne, der definerer clip-path og dets basale formfunktioner.

Hvorfor bruge det?

Live forhåndsvisning klipper en rigtig forhåndsvisningsboks til den valgte form, så du ser det egentlige resultat i stedet for at forestille dig det ud fra koordinater.
Syv formforudindstillinger — cirkel, ellipse, trekant, femkant, sekskant, stjerne og afrundet rektangel — dækker langt de fleste clip-path-anvendelser uden at skulle skrive polygon-punkter i hånden.
Cirkel-, ellipse- og afrundet-rektangel-forudindstillingerne har en størrelse/afrundings-skyder, så du kan finjustere formen uden at redigere koordinater.
Producerer standard clip-path-CSS klar til at indsætte på et hvilket som helst element.
Kører helt i din browser — intet, du konfigurerer, uploades nogen steder. Gratis, ingen tilmelding, virker på mobil.

Sådan bruger du det

Vælg en form fra dropdown-menuen — cirkel, ellipse, trekant, femkant, sekskant, stjerne eller afrundet rektangel.
For cirkel-, ellipse- og afrundet-rektangel-former, justér størrelse/afrundings-skyderen for at finjustere klippet.
Se forhåndsvisningsboksen opdatere sig live, når du ændrer form eller skyder.
Kopiér den genererede clip-path-CSS, og indsæt den på det element, du vil klippe.
For et billede i stedet for en ensfarvet flade, anvend samme clip-path-egenskab på et <img> eller et element med en background-image.

Eksempel

Input

Form: Sekskant

Output

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 sekskant-klip, ofte brugt til badge-agtige profilbilleder eller feature-ikoner.

Basale former vs. polygon()

Cirkel, ellipse og inset (afrundet rektangel) er indbyggede CSS-basisformfunktioner med deres egen enkle syntaks — en radius eller to, plus en valgfri centerposition eller hjørneafrunding. Trekant, femkant, sekskant og stjerne er ikke indbyggede former; de udtrykkes alle med polygon(), en flad liste af x/y-koordinatpar, der tegner formens omrids. Dette værktøj beregner automatisk disse koordinater for regulære (jævnt fordelte) polygoner og en femtakket stjerne — den kedelige del at få rigtig i hånden.

Almindelige clip-path-mønstre

Cirkulært avatar- eller badge-billede: circle() ved en mellemstor radius, ofte kombineret med et kvadratisk kildebillede, så cirklen ikke strækkes til en ellipse.
Skrå sektionsopdeler: en brugerdefineret polygon (ikke inkluderet som forudindstilling her), der skråstiller top- eller bundkanten af en fuldbredt sektion for et ikke-rektangulært sideskift.
Stjernebedømmelsesikon eller badge-form: stjerneforudindstillingen, nyttig som en dekorativ form frem for håndtegnet SVG til simple tilfælde.
Sekskantet billedgitter: sekskant-klippede billeder arrangeret i et bikube-layout, et almindeligt mønster på porteføljer/team-sider.
Afrundet rektangel som et lettere alternativ til border-radius, når klippet også skal skære overflydende underelementer af, da border-radius alene ikke klipper underelementer uden ekstra overflow:hidden.

Kombination med andre CSS-værktøjer

clip-path kombineres ofte med en CSS-gradient som den baggrund, der klippes, eller med en box-shadow anvendt på et indpakkende element (da clip-path også klipper et elements egen skygge, er en skygge på en forælder den sædvanlige løsning til en klippet form, der stadig skal fremstå som svævende).

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

Ofte stillede spørgsmål

Påvirker clip-path elementets layoutstørrelse?

Nej — elementet beholder sin oprindelige boksstørrelse og position i layoutøjemed; clip-path ændrer kun, hvad der tegnes. Omkringliggende elementer lægges ud, som om klippet ikke var anvendt, hvilket kan overraske dig, hvis du forventer, at den klippede form opfører sig som et element med ændret størrelse.

Hvorfor vises min box-shadow ikke på min klippede form?

clip-path klipper hele elementets rendering, inklusive enhver skygge, det kaster, så et cirkel- eller polygon-klippet elements egen box-shadow bliver skåret af ved klippegrænsen. For at få en skygge, der følger den synlige form, skal du anvende box-shadow på et uklippet indpakningselement omkring det klippede i stedet.

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

Ja, men kun mellem to clip-path-værdier af samme type og med samme antal punkter — for eksempel en polygon() med 6 punkter, der overgår til en anden polygon() med 6 punkter. Overgange mellem fundamentalt forskellige former (en circle() til en polygon()) vil generelt ikke animere jævnt på tværs af browsere.

Kan clip-path bruges på baggrundsbilleder, ikke kun elementindhold?

clip-path klipper hele elementet — inklusive dets background-image, background-color, kanter og indhold samlet — frem for specifikt baggrunden. Hvis du kun vil klippe et baggrundsbillede, mens andet indhold forbliver uklippet, skal du anvende clip-path på et separat element, der kun indeholder baggrunden.

Understøttes clip-path i alle moderne browsere?

Ja — clip-path med basale formfunktioner (circle, ellipse, inset, polygon) har været Baseline widely available på tværs af store browsere siden januar 2020, ifølge MDN's kompatibilitetsdata. Det er generelt sikkert at bruge i produktion uden en fallback for nuværende browserversioner.