CSS Clip-Path-generator

Designa CSS clip-path-former visuellt

Egenskapen clip-path låter dig skära ut ett element i nästan vilken form som helst med enbart CSS. Hexagonala avatarer, sneda sektionskanter, pilformade knappar och pratbubblor kan alla skapas utan bilder eller extra markup. Att skriva polygonkoordinater för hand är dock mödosamt. Den här generatorn ger dig en live-förhandsvisning med dragbara handtag, så att du kan forma elementet och kopiera den färdiga deklarationen.

Polygoner, cirklar, ellipser och insets

Verktyget stöder de viktigaste grundformsfunktionerna. polygon() tar en lista med punkter skrivna som x- och y-procent, vilket är idealiskt för trianglar, trapetser, stjärnor och pilar. circle() och ellipse() tar en radie och en mittposition, och inset() skär in från varje kant av boxen med en valfri radie för rundade hörn. Välj en förinställning som utgångspunkt och finjustera den. För polygoner kan du dra valfritt handtag för att flytta ett hörn, eller fokusera ett handtag och använda piltangenterna för exakta steg på en procent, och hålla ned Shift för större hopp.

Tips för att använda clip-path

Eftersom alla värden är procent skalas formen med elementet, vilket gör den väl lämpad för responsiva layouter. Kom ihåg att clip-path bara påverkar ritningen: kantlinjer och boxskuggor utanför formen klipps också bort, så använd ett omslutande element med filter: drop-shadow() om du behöver en skugga som följer formen. Du kan också animera mellan två polygoner med samma antal punkter med hjälp av CSS-övergångar för mjuka morfningseffekter. Den genererade koden är en enda rad som du kan klistra in i valfri stilmall, och all redigering sker lokalt i din webbläsare.