CSS Clip-Path-generator för urklippsbanor

Generera CSS clip-path-kod visuellt, med stöd för former som polygoner, cirklar och ellipser, och möjlighet att bearbeta bilder i batch

Felrapport

Körningsläge i webbläsaren: Dina data bearbetas i webbläsaren och laddas inte upp till servern.

Hastighet och stabilitet: Bearbetningshastigheten beror på din enhet och webbläsare. För stora batchjobb kan skrivbordsversionen vara stabilare.

Verktyget laddas, vänta...

Om onlineverktyget inte kan laddas eller köras, prova skrivbordsverktyget. https://tools.yikeaigc.com/

Verktygsanvändning

Återgå till gamla versionen

Ställ först in beskärningsbanan, kopiera sedan koden eller bearbeta bilder i batch

Efter val av förinställd form kan du dra polygonens kontrollpunkter, eller växla till cirkel, ellips eller infälld rektangel och justera parametrar. Batchbearbetning använder aktuell bana. Vid uppladdning av flera bilder visas bara de första 20, men alla bearbetas.

Aktuell baninformation

Typpolygon

Kontrollpunkt3

Tips: Slutför baninställningen först, kopiera sedan koden eller bearbeta bilder.

Liveförhandsvisning I polygonläge kan du dra de blå kontrollpunkterna. Koordinaterna skapar CSS automatiskt.

Koordinater: relativt elementet, övre vänstra hörnet är 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Form och förinställning Välj typ först, justera sedan parametrar

Formtyp

Förvalda kategorier

Banparametrar Värden stöder procent

Koordinattext

Radie

Centrum X

Centrum Y

Horisontell radie

Vertikal radie

Centrum X

Centrum Y

upp

höger

ner

vänster

Rundade hörn

Förhandsvisning och utdata Bakgrund påverkar bara förhandsvisning och bildexport

Förhandsvisningsbredd (px)

Förhandsvisningshöjd (px)

Färg A

Färg B

Gradientvinkel

Förhandsbild

Visa elementgräns Inkludera -webkit-prefix Generera klassväljare

Generera kod

Koden uppdateras i realtid med inställningarna.

Tillämpa aktuell bana i batch Ställ först in banan i föregående steg och välj sedan bildbearbetning.

Klicka eller dra in bilder Stöder vanliga format som JPG, PNG, WebP, GIF, BMP

Ingen bild vald.

Utdatainställningar PNG stöder transparent bakgrund

Utdataformat

Storleksläge

Begränsa långsida (px)

Anpassad bredd (px)

Anpassad höjd (px)

Utdatakvalitet92%

Gör området utanför beskärningen transparent Använd aktuell sökväg

Väntar på bearbetning.

Bildförhandsvisning och resultat Efter uppladdning visas de första 20 bilderna, alla filer ingår vid bearbetning.

Bilder att bearbeta0 bilder

Välj bilder för att visa miniatyrer.

Resultat0 bilder

Resultatminiatyrer visas efter bearbetning.

Instruktioner

Användningsinstruktioner

Designa beskärningsbanan:När du har öppnat verktyget väljer du först formtyp i steget ”Designa bana”. Du kan använda polygon, cirkel, ellips eller infälld rektangel.
Välj förinställd form:Du kan välja förinställningar bland grundformer, pilar och symboler samt dekorativa former och sedan justera parametrarna efter behov.
Redigera banparametrar:För polygoner kan du dra kontrollpunkter eller ange procentuella koordinater i koordinatfältet. För cirklar, ellipser och infällda rektanglar kan du ange radie, mittpunkt, marginaler och rundade hörn direkt.
Ställ in förhandsvisning:Du kan justera förhandsvisningens bredd och höjd, gradientfärger och gradientvinkel, eller välja en bild som förhandsvisningsinnehåll.
Kopiera CSS-kod:När du är nöjd med resultatet klickar du på ”Kopiera clip-path” eller ”Kopiera CSS”. Du kan välja om -webkit-prefix och klassväljare ska inkluderas.
Batchbearbeta bilder:Klicka på ”Nästa: batchbearbetning”, välj flera bilder, ställ in utdataformat, kvalitet och storleksläge och starta sedan bearbetningen.
Ladda ned resultat:När bearbetningen är klar klickar du på ”Ladda ned alla resultat som ZIP”. Utdatafilerna behåller så långt som möjligt de ursprungliga filnamnen, och vid namnkonflikter läggs siffror till automatiskt.

Vanliga frågor

Svar: clip-path används för att beskära element till en angiven form och används ofta för formade bildvisningar, kantdesign på kort, knappformer, dekorativa webbformer och interaktiva effekter.

Svar: polygon skapar en polygon med flera koordinatpunkter; circle skapar ett cirkelformat beskärningsområde; ellipse skapar ett elliptiskt beskärningsområde; inset skapar en infälld rektangel och stöder parametrar för rundade hörn.

Svar: Koordinater anges i procent, till exempel betyder 50% 0% mitten av elementets överkant och 100% 100% betyder nedre högra hörnet. Varje punkt separeras med kommatecken och minst 3 punkter krävs.

Svar: -webkit-clip-path används för kompatibilitet med vissa WebKit-baserade miljöer. För att förbättra stödet kan du behålla både den prefixförsedda och den standardiserade syntaxen.

Svar: Vanliga bildformat kan väljas som indata, och utdata stöder PNG, JPEG och WebP. PNG passar för att behålla transparenta områden, JPEG passar för att skapa mindre filer och WebP passar för en bra balans mellan filstorlek och bildkvalitet.

Svar: Verktyget försöker behålla de ursprungliga filnamnen och ersätter filändelsen enligt utdataformatet. Om filer med samma namn finns läggs en siffra till efter filnamnet för att undvika att resultaten skriver över varandra.