CSS Clip-Path — Skapa Icke-Rektangulära Former i CSS

CSS clip-path låter dig beskära element till anpassade former — trianglar, hexagoner, stjärnor och frihandspolygoner. Men att skriva polygonkoordinater för hand är smärtsamt. Vår visuella Clip-path-generator låter dig rita formen direkt, se en levande förhandsvisning och kopiera CSS:en med exakta koordinater.

Vad är CSS Clip-Path?

CSS-egenskapen clip-path klipper ett element till en angiven form och döljer allt utanför formgränsen. Den stöder grundformer (cirkel, ellips, infällning) och anpassade polygoner definierade av en serie x/y-koordinatpar som procentandelar.

Hur använder du Clip-path-generatorn?

Välj en grundformsförinställning (triangel, pentagon, hexagon, stjärna) eller börja med en anpassad polygon. Dra hörn för att justera formen — lägg till eller ta bort punkter vid behov. Den levande förhandsvisningen visar hur clip-path ser ut på ett exempelelement. Kopiera det genererade CSS-värdet clip-path: polygon(...).

Bästa praxis

Använd procentkoordinater (inte pixlar) så att clip-path skalas med elementets storlek. Håll former enkla för bättre kompatibilitet — grundpolygoner fungerar överallt. Lägg till en transition på clip-path för smidiga morfanimationer vid hover — en subtil men imponerande effekt.