CSS Clip-Path-generator

Det här verktyget genererar ett CSS clip-path-värde från en formmall — cirkel, ellips, triangel, pentagon, hexagon, stjärna eller en rundad rektangel — och visar den klippta formen live på en förhandsvisningsruta innan du kopierar CSS:en. Inget behov av att räkna ut polygon()-koordinater för hand för vanliga former.

Vad är detta verktyg?

clip-path är CSS-egenskapen som döljer allt utanför ett definierat område av ett element, så att bara formen inuti syns — resten av elementets box finns fortfarande kvar i layouten, den ritas bara inte ut. Den accepterar grundläggande formfunktioner som circle(), ellipse(), inset() och polygon(), där den sistnämnda tar en godtycklig lista av x/y-koordinatpar för att definiera valfri rakkantad form.

polygon()-koordinater är den svåraste delen att skriva för hand — en pentagon, hexagon eller stjärna kräver var och en flera precist placerade punkter, och en felaktig punkt förvränger hela formen. Det här verktyget beräknar de koordinaterna åt dig utifrån en formmall, uppdaterar förhandsvisningen live direkt, och ger dig den exakta clip-path-CSS:en att kopiera.

Källa: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikationerna som definierar clip-path och dess grundläggande formfunktioner.

Varför använda det?

Förhandsvisning live klipper en riktig förhandsvisningsruta till den valda formen, så du ser det verkliga resultatet istället för att föreställa dig det utifrån koordinater.
Sju formmallar — cirkel, ellips, triangel, pentagon, hexagon, stjärna och rundad rektangel — täcker de allra flesta clip-path-användningsfall utan att skriva polygonpunkter för hand.
Cirkel-, ellips- och rundad-rektangel-mallarna har ett storleks-/rundningsreglage så du kan finjustera formen utan att redigera koordinater.
Ger standard clip-path-CSS redo att klistras in på valfritt element.
Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans. Gratis, ingen registrering, fungerar på mobilen.

Så använder du det

Välj en form från listan — cirkel, ellips, triangel, pentagon, hexagon, stjärna eller rundad rektangel.
För cirkel-, ellips- och rundad-rektangel-former, justera storleks-/rundningsreglaget för att finjustera klippningen.
Se förhandsvisningsrutan uppdateras live när du ändrar formen eller reglaget.
Kopiera den genererade clip-path-CSS:en och klistra in den på det element du vill klippa.
För en bild istället för en enfärgad yta, applicera samma clip-path-egenskap på en <img> eller ett element med background-image.

Exempel

Inmatning

Form: Hexagon

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%);

En regelbunden hexagonklippning, vanligt använd för profilbilder i emblemstil eller funktionsikoner.

Grundformer kontra polygon()

Cirkel, ellips och inset (rundad rektangel) är inbyggda CSS-grundformsfunktioner med sin egen enkla syntax — en eller två radier, plus en valfri centerposition eller hörnrundning. Triangel, pentagon, hexagon och stjärna är inte inbyggda former; de uttrycks alla med polygon(), en platt lista av x/y-koordinatpar som spårar formens kontur. Det här verktyget beräknar de koordinaterna för regelbundna (jämnt fördelade) polygoner och en femuddig stjärna automatiskt, vilket är den tröttsamma delen att få rätt för hand.

Vanliga clip-path-mönster

Rund avatar eller emblem: circle() vid en medelstor radie, ofta kombinerad med en kvadratisk källbild så att cirkeln inte sträcks ut till en ellips.
Vinklad sektionsavdelare: en anpassad polygon (inte inkluderad som mall här) som lutar toppen eller botten av en sektion i full bredd för ett icke-rektangulärt sidbrott.
Stjärnbetyg-ikon eller emblemform: stjärnmallen, användbar som en dekorativ form istället för handritad SVG i enkla fall.
Hexagonalt bildrutnät: hexagonklippta bilder ordnade i ett bikakemönster, ett vanligt portfölj-/team-sidesmönster.
Rundad rektangel som ett lättviktigt alternativ till border-radius när klippningen även behöver skära av överflödigt underordnat innehåll, eftersom border-radius ensam inte klipper underordnade element utan ytterligare overflow:hidden.

Kombinera med andra CSS-verktyg

clip-path kombineras ofta med en CSS-gradient som den klippta bakgrunden, eller med en box-shadow applicerad på ett omslutande element (eftersom clip-path även klipper ett elements egen skugga, är en skugga på en förälder den vanliga lösningen för en klippt form som ändå ska verka sväva).

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

Vanliga frågor

Påverkar clip-path elementets layoutstorlek?

Nej — elementet behåller sin ursprungliga boxstorlek och position för layoutändamål; clip-path ändrar bara vad som ritas ut. Omgivande element läggs ut som om klippningen inte tillämpats, vilket kan överraska dig om du förväntar dig att den klippta formen ska bete sig som ett omstorlekat element.

Varför visas inte box-shadow på min klippta form?

clip-path klipper hela elementets rendering, inklusive eventuell skugga det kastar, så en box-shadow på ett cirkel- eller polygonklippt element klipps av vid klippgränsen. För att få en skugga som följer den synliga formen, applicera box-shadow på ett oklippt omslutande element runt det klippta istället.

Kan jag animera eller övergå en clip-path-form?

Ja, men bara mellan två clip-path-värden av samma typ och med samma antal punkter — till exempel en polygon() med 6 punkter som övergår till en annan polygon() med 6 punkter. Övergång mellan grundläggande olika former (en circle() till en polygon()) animerar generellt inte smidigt över webbläsare.

Kan clip-path användas på bakgrundsbilder, inte bara elementinnehåll?

clip-path klipper hela elementet — inklusive dess background-image, background-color, ramar och innehåll tillsammans — snarare än bakgrunden specifikt. Om du bara vill klippa en bakgrundsbild och behålla annat innehåll oklippt, applicera clip-path på ett separat element som bara innehåller bakgrunden.

Stöds clip-path i alla moderna webbläsare?

Ja — clip-path med grundläggande formfunktioner (circle, ellipse, inset, polygon) har varit Baseline brett tillgängligt i alla större webbläsare sedan januari 2020, enligt MDN:s kompatibilitetsdata. Det är generellt säkert att använda i produktion utan reservlösning för nuvarande webbläsarversioner.