⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS Clip-Path Generatorius

Kurkite bet kokius daugiakampius kontūrus – įskaitant įgaubtas išpjovas – vilkdami taškus tiesioginės peržiūros langelyje arba savo paties įkeltame paveikslėlyje ir nusikopijuokite gautą CSS clip-path: polygon(...) reikšmę.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Vilkite tašką, kad jį perkeltumėte. Spustelėkite prie briaunos, kad ten pridėtumėte tašką. Dukart spustelėkite tašką, kad jį pašalintumėte (mažiausiai 3 taškai).

Apdorojama... 0%

Rezultatas

CSS clip-path priima polygon() funkciją, sudarytą iš bet kokio skaičiaus x/y koordinačių porų, o tai reiškia, kad galima stačiakampį iškirpti į formas, gerokai pranokstančias paprastus keturkampius ir apskritimus, kurių dažniausiai griebiamasi. Keblumas tas, kad tų koordinačių rinkimas ranka yra nuobodus ir beveik neįmanomas norint gauti ką nors sudėtingesnio už paprasčiausią trikampį – šis generatorius paverčia tą koordinačių sąrašą vilkiamais taškais ant tiesioginės peržiūros, tad kontūras, kurį matote, visada yra būtent toks, kokį sukuria CSS.

Kiekvienas peržiūros taškas išsaugomas kaip dėžutės pločio ir aukščio procentinė dalis – būtent taip clip-path: polygon() ir veikia iš vidaus: tokiu būdu sukurta forma išlaiko teisingas proporcijas, kad ir kokio dydžio elementas būtų tikrame puslapyje, nuo mažos piktogramos kaukės iki viso pločio didvyriškos reklamjuostės. Vilkite bet kurį tašką, kad performuotumėte kontūrą, spustelėkite arti briaunos, kad pridėtumėte naują tašką tiksliai ten, kur spustelėjote, arba dukart spustelėkite esamą tašką, kad jį ištrintumėte – redaktorius visada išlaiko bent tris taškus, nes su mažiau daugiakampis negali egzistuoti.

Šeši įdiegti šablonai parinkti taip, kad parodytų, jog clip-path gali daugiau nei išgaubtas figūras: žvaigždė ir rodyklė abi remiasi atgal nukreiptais kampais, kurie sminga į vidų, kalbos burbulas išpjauna trikampę uodegėlę iš paprasto stačiakampio, o bilieto šaknelė įspaudžia dvi išpjovas priešingose briaunose, kaip atrodo tikras perforuotas bilietas. Įkelkite bet kurį šabloną ir toliau vilkite – niekas redaktoriuje neužrakina jūsų pradinėje formoje.

Įkelkite savo paveikslėlį, kad peržiūrėtumėte clip-path ant tikro turinio vietoj paprastos dėžutės, arba praleiskite įkėlimą – peržiūra automatiškai rodys dryžuotą raštą, kad iškirpta forma bet kuriuo atveju liktų aiškiai matoma. Kaip ir visi šios svetainės įrankiai, viskas veikia vietoje naršyklėje: joks paveikslėlis niekada nepalieka jūsų įrenginio, o generatorius veikia ir be interneto, kai tik puslapis būna įkeltas.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Rankenėlės taškams vilkti (palaikoma pelė, lietimas ir rodyklių klavišai) su realiu laiku atsinaujinančia clip-path: polygon(...) išvestimi juos stumdant.
  • Spustelėkite prie bet kurios briaunos, kad ten įterptumėte naują tašką; dukart spustelėkite tašką, kad jį pašalintumėte (visada išlaikoma bent 3 taškų mažiausia riba).
  • Šablonai rodyklei, žvaigždei, šešiakampiui, kalbos burbului ir bilieto šaknelei – įskaitant išties įgaubtus, neišgaubtus kontūrus – bei galimybė įkelti paveikslėlį, kad peržiūrėtumėte apkarpą ant savo nuotraukos.

Pagrindiniai privalumai

✓ Vos tik pertempiate tašką, peržiūros langelyje iškart atnaujinamas clip-path, todėl matote tikslų kontūrą dar prieš nusikopijuodami nors vieną CSS eilutę.
✓ Taškų koordinatės saugomos procentais, kaip ir pačiame clip-path: polygon() metode, tad bet kokio dydžio peržiūroje sukurtas kontūras išliks teisingas ir prie bet kokio elemento dydžio jūsų makete.
✓ Šeši pradiniai šablonai – tarp jų žvaigždė, kalbos burbulas ir dantyta bilieto šaknelė – apima figūras, kurioms kitu atveju tektų daug ranka spėlioti koordinačių.

Naudojimo atvejai

  • • Vilkdami iš anksto nustatytus taškus paverskite herojinį paveikslėlį ar kortelės miniatiūrą į rodyklę, žvaigždę ar šešiakampį, tada nukopijuokite tikslų CSS clip-path: polygon(...) kodą.
  • • Sukurkite tikrai įdubusią formą – kalbos burbulo uodegėlę ar iškirptą bilieto šaknelę – ko niekada nepasiektumėte paprastu border-radius ar mask paveikslėliu.
  • • Įkelkite savo nuotrauką ir patikrinkite, kaip atrodys pasirinktas daugiakampis apkarpymas, prieš pritaikydami clip-path reikšmę tikrame puslapyje.