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

CSS Clip-Path-generator

Rita godtyckliga polygonformer – inklusive konkava hack – genom att dra punkter på en förhandsvisningsruta eller en egen uppladdad bild, och kopiera det resulterande CSS-värdet clip-path: polygon(...).

🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.

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 som består av valfritt antal x/y-koordinatpar, vilket innebär att den kan forma en ruta till långt mer än de enkla rektanglar och cirklar de flesta använder. Haken är att det är tidsödande och näst intill omöjligt att skriva koordinaterna för hand till något mer avancerat än en enkel triangel – den här generatorn gör om koordinatlistan till en uppsättning dragbara punkter i en förhandsvisning, så att den form du ser alltid är den form CSS-koden ger.

Varje punkt i förhandsvisningen lagras som en procentandel av rutans bredd och höjd, vilket är precis så som clip-path: polygon() fungerar internt: en form som byggs på det här sättet behåller sina proportioner oavsett vilken storlek elementet får på en riktig webbsida, från en liten ikonmask till en fullbred hjältebild. Dra valfri punkt för att ändra 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 radera den – redigeraren behåller alltid minst tre punkter, eftersom en polygon inte kan existera med färre.

De sex medföljande förvalda formerna är valda för att visa att clip-path kan mer än konvexa former: stjärnan och pilen använder båda reflexvinklar som pekar inåt, pratbubblan skär ut en triangulär svans ur en annars vanlig rektangel, och biljettfliken gör två hack i motstående kanter precis som en riktig perforerad biljett. Ladda en förvald form och fortsätt dra därifrån – ingenting i redigeraren låser dig till startformen.

Ladda upp din egen bild för att förhandsvisa clip-path-effekten mot riktigt innehåll i stället för en enfärgad ruta, eller hoppa över uppladdningen så faller förhandsvisningen tillbaka på ett randigt mönster så att den utskurna formen syns tydligt oavsett. Precis som alla verktyg på den här sajten körs allting lokalt i webbläsaren: ingen bild lämnar någonsin din enhet, och generatorn fortsätter fungera offline när sidan väl har laddats.

Gillar du det här verktyget? Tror du att den här produkten är användbar? Ser du potential i det och vill stödja det?

🛡️
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, pekskärm och finjustering med piltangenterna) med clip-path: polygon(...)-utdata som uppdateras i realtid medan du flyttar dem.
  • Klicka nära en kant för att lägga till en ny punkt där, dubbelklicka på en punkt för att ta bort den (minst 3 punkter behålls alltid).
  • Förvalda former för pil, stjärna, hexagon, pratbubbla och biljettflik – inklusive genuint konkava, icke-konvexa konturer – plus möjlighet att ladda upp en bild så att du kan förhandsvisa formen mot din egen bild.

Viktiga fördelar

✓ Varje gång du drar en punkt skrivs den aktuella clip-path-banan om direkt i förhandsvisningen, så att du ser exakt hur formen blir innan du kopierar en enda rad CSS.
✓ Punkterna lagras som procentvärden, precis som i clip-path: polygon() självt – en form som byggs i en viss förhandsvisningsstorlek förblir därför korrekt oavsett elementstorlek i din egen layout.
✓ Sex förvalda startformer – bland annat en stjärna, en pratbubbla och en biljettflik med hack – täcker in former som annars skulle kräva mycket manuell koordinatgissning.

Användningsfall

  • • Forma en hero-bild eller kortminiatyr till en pil, stjärna eller hexagon genom att dra i förinställda punkter – kopiera sedan det exakta clip-path: polygon(...)-CSS-värdet.
  • • Bygg en genuint konkav form – en pratbubbelsvans eller en tandad biljettstump – som en vanlig border-radius eller mask-bild aldrig skulle kunna åstadkomma.
  • • Ladda upp ditt eget foto för att se exakt hur en anpassad polygonbeskärning kommer att se ut innan du skickar clip-path-värdet till en riktig sida.