⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Clip-Path Generator

Rita godtyckliga polygonformer – inklusive konkava skåror – genom att dra punkter på en liveförhandsgranskningsruta eller din egen uppladdade bild, och kopiera det resulterande CSS clip-path: polygon(...)-värdet.

Dra en punkt för att flytta den. Klicka nära en kant för att lägga till en punkt där. Dubbelklicka på en punkt för att ta bort den (minst 3 punkter).

Bearbetar... 0%

Resultat

CSS clip-path accepterar en polygon()-funktion gjord av valfritt antal x/y-koordinatpar, vilket innebär att den kan skära en ruta till former långt bortom de enkla rektanglarna och cirklarna som de flesta människor sträcker sig efter. Haken är att det är tråkigt att skriva dessa koordinater för hand och nästan omöjligt att få rätt för något utöver en grundläggande triangel - den här generatorn förvandlar den koordinatlistan till en uppsättning dragbara punkter på en liveförhandsvisning, så formen du ser alltid är den form som CSS producerar.

Varje punkt på förhandsgranskningen lagras som en procentandel av rutans bredd och höjd, vilket är exakt hur clip-path: polygon() själv fungerar under huven: en form byggd på detta sätt håller sina proportioner korrekta oavsett vilken storlek elementet hamnar på på en riktig sida, från en liten ikonmask till en hjältebanner i full bredd. Dra valfri punkt för att omforma konturen, klicka nära en kant för att lägga till en ny punkt exakt där du klickade, eller dubbelklicka på en befintlig punkt för att ta bort den – redigeraren behåller alltid minst tre punkter, eftersom en polygon inte kan existera med färre.

De sex buntade förinställningarna är utvalda för att bevisa att clip-path kan göra mer än konvexa former: stjärnan och pilen förlitar sig båda på reflexvinklar som pekar inåt, pratbubblan skär ut en triangulär svans ur en annars vanlig rektangel, och biljettstubben gör två skåror i motsatta kanter som en riktig perforerad biljett ser ut. Ladda en förinställning och fortsätt att dra därifrån - ingenting med redigeraren låser dig till startformen.

Ladda upp din egen bild för att förhandsgranska klippbanan mot verkligt innehåll istället för en vanlig ruta, eller hoppa över uppladdningen helt och förhandsvisningen faller tillbaka till ett randigt mönster så att den skurna formen förblir tydligt i båda riktningarna. Som alla verktyg på den här webbplatsen körs det hela lokalt i webbläsaren: ingen bild lämnar din enhet någonsin och generatorn fortsätter att fungera offline när sidan har laddats.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Dragbara punkthandtag (mus, beröring och piltangenter) med klippbana som uppdateras live: polygon(...) utdata när du flyttar dem.
  • Klicka nära valfri kant för att infoga en ny punkt där, dubbelklicka på en punkt för att ta bort den (minst 3 punkter behålls alltid).
  • Förinställningar för pil-, stjärn-, hexagon-, pratbubblor och biljett-stubbformer – inklusive genuint konkava, icke-konvexa konturer – plus valfri bilduppladdning så att du kan förhandsgranska klippet på din egen bild.

Viktiga fördelar

✓ Varje punktdrag skriver om den levande klippbanan på förhandsvisningen direkt, så att du ser den exakta formen innan du kopierar en enda rad med CSS.
✓ Poäng lagras i procent, precis som clip-path: polygon() själv, så en form som byggs med valfri förhandsgranskning förblir korrekt vid vilken elementstorlek som helst i din egen layout.
✓ Sex startförinställningar – inklusive en stjärna, en pratbubbla och en utskuren biljett – täcker former som annars skulle kräva mycket manuell koordinatgissning.

Användningsfall

  • • Snid in en hjältebild eller kortminiatyr i en pil, stjärna eller hexagon genom att dra förinställda punkter, kopiera sedan den exakta klippbanan: polygon(...) CSS.
  • • Bygg en genuint konkav form - en pratbubblas svans eller en skårad biljett - som en enkel gränsradie eller maskbild aldrig skulle kunna producera.
  • • Ladda upp ditt eget foto för att kontrollera exakt hur en anpassad polygonbeskärning kommer att se ut innan du skickar klippvägsvärdet till en riktig sida.