CSS Clip-path-generator
Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.
Vad är clip-path i CSS?
clip-path är en CSS-egenskap som klipper ett element enligt en grundform eller bana. Allt utanför formen döljs, så du kan förvandla en rektangulär bild eller låda till en triangel, cirkel, hexagon, sned banner eller vilken anpassad polygon som helst utan att redigera bilden.
Vilka webbläsare stödjer clip-path?
Alla moderna webbläsare stödjer de grundformfunktioner som denna generator använder: polygon(), circle(), ellipse() och inset(), inklusive Chrome, Edge, Firefox, Safari och Opera. Prefixet -webkit-clip-path behövs bara för mycket gamla mobilversioner av Safari.
Hur fungerar polygonläget?
I polygonläget visar förhandsvisningen varje hörnpunkt som en dragbar prick. Dra en prick för att flytta den, dubbelklicka på tom yta för att lägga till en ny, klicka på en prick för att markera den och använd raderaknappen för att ta bort den. CSS-värdet uppdateras i realtid med procentkoordinater.
Vad betyder procenten i polygon()?
Varje hörnpunkt skrivs som ett X Y-par i procent, mätt från elementets övre vänstra hörn. Eftersom värdena är relativa till elementets storlek skalar formen med elementet och förblir responsiv vid alla skärmbredder.
Vad är skillnaden mellan circle, ellipse och inset?
circle(radie at x y) klipper ut en cirkel med en radie, ellipse(rx ry at x y) tillåter olika horisontell och vertikal radie, och inset(upp höger ner vänster) klipper ut en rektangel som dras ihop från varje kant. Denna generator har reglage och sifferfält för alla parametrar.
Påverkar clip-path layouten eller klick?
clip-path är enbart visuellt. Elementet behåller sin ursprungliga låda i layouten, så inget runt om flyttas. Pekarhändelser som klick registreras dock bara i det synliga klippta området, vilket är praktiskt för knappar i egen form.
Kan jag animera clip-path?
Ja. Webbläsare kan mjukt övergå mellan två clip-path-värden när formfunktion och antal punkter stämmer, t.ex. från en stor till en liten inset, eller mellan två polygoner med samma antal hörn. Animera med CSS-egenskapen transition.
Laddas min bild eller data upp någonstans?
Nej. Förhandsbilden är en lokalt ritad gradient på en canvas och alla beräkningar sker i din webbläsare. Inget av det du skapar skickas till någon server, så verktyget fungerar även offline när det laddats.
Vad är vanliga användningsområden för clip-path?
Populära användningar är sneda hero-sektioner, hexagonala eller runda avatarmasker, triangulära pratbubbepekar, kreativa fotocollage, fasade korthörn och knappar i egen form, allt utan bildredigeringsprogram.
Hur man använder CSS Clip-path-generator
Forma valfritt element med CSS clip-path istället för att redigera bilder. Välj en formfunktion, dra i handtagen och kopiera produktionsklar CSS. Allt körs lokalt i din webbläsare.
- Välj ett läge: Polygon, Cirkel, Ellips eller Inset.
- Dra i Polygon-läget hörnpunkterna, dubbelklicka på tomt utrymme för att lägga till en punkt och markera en innan du tar bort den.
- I lägena Cirkel, Ellips och Inset finjusterar du varje värde med reglagen eller skriver en exakt procentsats.
- Se hur liveförhandsvisningen uppdateras över en lokalt genererad gradientprovbild.
- Kopiera den enrads clip-path-regeln och klistra in den i din stilmall.
Håll samma antal polygonpunkter mellan två tillstånd så kan du animera formen mjukt med en CSS-transition.
Relaterade verktyg
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
- CSS-förskönare Formatera och försköna CSS-kod direkt. Konvertera minifierad CSS till läsbar kod med anpassningsbara alternativ.
- CSS-minifierare Gratis online CSS-minifierare. Komprimera och optimera CSS-kod omedelbart genom att ta bort mellanslag, kommentarer och onödiga tecken. Minska filstorleken för snabbare webbprestanda.