Softonic

CSS clip-path-generator

Steg 1 / 2
Nästa

Med clip-path kan du klippa vilket element som helst i en polygonform och skapa formade bilder, asymmetriska hero-sektioner eller pratbubblor utan SVG-lager. Att skriva polygon()-koordinater för hand är en inbjudan till räknefel. Den här generatorn skapar korrekt clip-path-deklaration för fyra färdiga former: triangel, romb, parallelltrapets och hexagon. Välj en form, generera och kopiera CSS-koden.

Så här bygger du ett clip-path

  1. 1

    Välj form

    Välj en av de fyra förinställningarna: triangel, romb, parallelltrapets eller hexagon.

  2. 2

    Generera CSS

    Klicka på knappen så bygger verktyget regeln `clip-path: polygon(...)` för den valda formen.

  3. 3

    Kopiera regeln

    Kopiera resultatet och klistra in det i din stilmall. Procenttal håller formen responsiv till elementets storlek.

  4. 4

    Läs koordinaterna

    Varje talpar är en hörnpunkt: x- och y-positionen för det hörnet i procent av elementets ruta.

  5. 5

    Applicera

    `clip-path` fungerar på alla element i alla moderna webbläsare och formen skalar med elementet.

De fem formfunktionerna

Funktion Syntax Användning
inset() inset(10% 20% 10% 20% round 8px) Rektangulär beskärning med indrag och valfritt rundade hörn
circle() circle(50% at 50% 50%) Cirkel
ellipse() ellipse(40% 25% at 50% 50%) Ellips
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Valfri polygon
path() path("M0 0 L100 0 L50 100 Z") SVG-banadata (begränsat stöd)

Vanliga polygonklipp

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Diagonalen i en hero-sektion är förmodligen den mest använda av alla – den ger sektionen ett snett, modernt uttryck helt utan SVG.

Animera clip-path

clip-path animeras så länge båda tillstånden har samma formfunktion med samma antal punkter. En polygon med 4 hörn animeras smidigt till en annan polygon med 4 hörn; att lägga till eller ta bort hörn bryter interpoleringen.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Använd detta för uppenbarelseeffekter, subtila förvrängningar vid hovring eller sidövergångar.

clip-path jämfört med overflow: hidden

overflow: hidden beskär till rektangeln för border-box (som kan rundas av med border-radius). clip-path beskär till vilken form du än definierar och beskär allt – inklusive skuggor och konturer. Om du vill att skuggor ska förbli synliga utanför formen är clip-path inte rätt val.

filter: drop-shadow() kan lägga tillbaka en formföljande skugga på element med clip-path, men är långsammare.

Prestanda

clip-path är GPU-accelererad i moderna webbläsare, så animerade clip-path är smidiga. Undantaget är path() och mycket komplexa polygoner (över 40 hörn), som i vissa webbläsare faller tillbaka på CPU-rendering.

Tillgänglighet

clip-path ändrar bara det som syns. Skärmläsare, tangentbordsfokus och pekarhändelser följer elementets hela box, inte den beskurna formen. Om en bild beskärs till en stjärna läses alt-texten upp som vanligt. Om en knapp beskärs till en chevron är klickmålet hela rektangeln, inte den synliga chevronen – vilket kan leda till oavsiktliga klick på till synes tom yta.

För knappar med ovanliga beskurna former bör du ställa in elementets bredd och höjd snävt så att träffytan stämmer hyfsat väl med det synliga området.

Vanliga frågor

Alla moderna webbläsare (Chrome, Firefox, Safari och Edge) stöder polygon(), circle(), ellipse() och inset(). path() stöds i Chrome 88+, Firefox 97+ och Safari 13.1+. IE stöder ingen av dem, men dess användning ligger i dag under tröskeln för de flesta webbplatser.

Eftersom clip-path beskär skuggorna tillsammans med allt annat. Använd filter: drop-shadow() i stället – den följer den beskurna formen och håller skuggan synlig.

Endast mellan samma formfunktion med samma antal punkter. En polygon med 4 punkter animeras till en annan polygon med 4 punkter. Att lägga till eller ta bort punkter, eller byta funktion (från polygon till cirkel), bryter interpoleringen.

Nej – pekarhändelser går fortfarande till elementets hela rektangel. En stjärnformad knapp har en rektangulär klickyta, inklusive de genomskinliga hörnen. Överväg pointer-events: none på ett ::before eller använd snävt tilltagna element om detta spelar roll.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.