CSS clip-path generatorius

Šis įrankis sugeneruoja CSS clip-path reikšmę iš figūros šablono — apskritimo, elipsės, trikampio, penkiakampio, šešiakampio, žvaigždės ar suapvalinto stačiakampio — ir gyvai parodo iškirptą figūrą peržiūros langelyje prieš kopijuojant CSS. Nereikia rankiniu būdu skaičiuoti polygon() koordinačių įprastoms figūroms.

Kas yra šis įrankis?

clip-path yra CSS savybė, kuri paslepia viską, kas yra už apibrėžtos elemento srities ribų, paliekant matomą tik vidinę figūrą — likusi elemento dėžutės dalis vis tiek egzistuoja išdėstyme, tiesiog ji nenupiešiama. Ji priima pagrindines figūrų funkcijas, tokias kaip circle(), ellipse(), inset() ir polygon(), pastaroji priima laisvą x/y koordinačių porų sąrašą bet kokiai tiesiakraštei figūrai apibrėžti.

polygon() koordinatės yra sunkiausia dalis rašyti ranka — penkiakampiui, šešiakampiui ar žvaigždei reikia kelių tiksliai išdėstytų taškų, o vieno klaidingo taško pakanka iškraipyti visai figūrai. Šis įrankis apskaičiuoja šias koordinates už jus iš figūros šablono, akimirksniu atnaujina gyvą peržiūrą ir pateikia tikslų clip-path CSS kodą kopijavimui.

Šaltinis: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikacijos, apibrėžiančios clip-path ir jos pagrindines figūrų funkcijas.

Kodėl jį naudoti?

Gyva peržiūra iškerpa tikrą peržiūros langelį pagal pasirinktą figūrą, tad matote tikrą rezultatą, o ne įsivaizduojate jį iš koordinačių.
Septyni figūrų šablonai — apskritimas, elipsė, trikampis, penkiakampis, šešiakampis, žvaigždė ir suapvalintas stačiakampis — apima didžiąją daugumą clip-path naudojimo atvejų nerašant polygon taškų ranka.
Apskritimo, elipsės ir suapvalinto stačiakampio šablonuose yra dydžio/suapvalinimo slankiklis, kad galėtumėte tikslinti figūrą neredaguodami koordinačių.
Sugeneruoja standartinį clip-path CSS kodą, paruoštą įklijuoti į bet kurį elementą.
Viskas vyksta jūsų naršyklėje — niekas iš to, ką konfigūruojate, niekur nesiunčiama. Nemokama, be registracijos, veikia mobiliuosiuose.

Kaip naudoti

Pasirinkite figūrą iš išskleidžiamo sąrašo — apskritimą, elipsę, trikampį, penkiakampį, šešiakampį, žvaigždę ar suapvalintą stačiakampį.
Apskritimo, elipsės ir suapvalinto stačiakampio figūroms koreguokite dydžio/suapvalinimo slankiklį, kad patikslintumėte iškirpimą.
Stebėkite, kaip peržiūros langelis atsinaujina gyvai, keičiant figūrą ar slankiklį.
Nukopijuokite sugeneruotą clip-path CSS kodą ir įklijuokite jį į norimą iškirpti elementą.
Vietoj vientisos spalvos naudojant nuotrauką, taikykite tą pačią clip-path savybę <img> elementui ar elementui su background-image.

Pavyzdys

Įvestis

Figūra: šešiakampis

Išvestis

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Taisyklingas šešiakampio iškirpimas, dažnai naudojamas ženkliuko stiliaus profilio nuotraukoms ar funkcijų piktogramoms.

Pagrindinės figūros palyginti su polygon()

Apskritimas, elipsė ir inset (suapvalintas stačiakampis) yra įmontuotos CSS pagrindinės figūrų funkcijos su savo paprasta sintakse — vienas ar du spinduliai, plius pasirenkama centro pozicija ar kampų suapvalinimas. Trikampis, penkiakampis, šešiakampis ir žvaigždė nėra įmontuotos figūros; jos visos išreiškiamos su polygon() — plokščiu x/y koordinačių porų sąrašu, apibraižančiu figūros kontūrą. Šis įrankis automatiškai apskaičiuoja šias koordinates taisyklingiems (tolygiai išdėstytiems) daugiakampiams ir penkiakampei žvaigždei — būtent tą nuobodžią dalį, kurią sunku teisingai atlikti ranka.

Dažni clip-path šablonai

Apvalus avataras ar ženkliukas: circle() vidutiniu spinduliu, dažnai derinama su kvadratiniu šaltinio paveikslėliu, kad apskritimas nebūtų ištemptas į elipsę.
Įstrižas skyriaus skirtukas: pritaikytas daugiakampis (čia neįtrauktas kaip šablonas), pakreipiantis viso pločio skyriaus viršutinį ar apatinį kraštą, sukuriant nestačiakampį puslapio lūžį.
Žvaigždės reitingo piktograma ar ženkliuko forma: žvaigždės šablonas, naudingas kaip dekoratyvi figūra vietoj ranka piešto SVG paprastiems atvejams.
Šešiakampio nuotraukų tinklelis: šešiakampiais iškirptos nuotraukos, sudėliotos korio išdėstymu — dažnas portfolio/komandos puslapio šablonas.
Suapvalintas stačiakampis kaip lengvesnė alternatyva border-radius, kai iškirpimas taip pat turi nukirpti pertekliuoja vaikų turinį, nes vien border-radius neiškerpa vaikų be papildomo overflow:hidden.

Derinimas su kitais CSS įrankiais

clip-path dažnai derinama su CSS gradientu kaip iškerpamu fonu, arba su box-shadow, taikomu aplinkiniam elementui (nes clip-path taip pat iškerpa paties elemento šešėlį, todėl šešėlis tėviniam elementui yra įprastas sprendimas iškirptai figūrai, kuri vis tiek turi atrodyti lyg plūduriuojanti).

→ CSS gradiento generatorius · border-radius generatorius · box-shadow generatorius

Dažniausiai užduodami klausimai

Ar clip-path veikia elemento išdėstymo dydį?

Ne — elementas išlaiko savo originalų dėžutės dydį ir poziciją išdėstymo tikslais; clip-path pakeičia tik tai, kas nupiešiama. Aplinkiniai elementai išdėstomi taip, lyg iškirpimas nebūtų taikomas — tai gali nustebinti, jei tikitės, kad iškirpta figūra elgsis kaip pakeisto dydžio elementas.

Kodėl box-shadow nerodo mano iškirptos figūros?

clip-path iškerpa visą elemento atvaizdavimą, įskaitant bet kokį jo metamą šešėlį, tad apskritimu ar daugiakampiu iškirpto elemento paties box-shadow nukertamas iškirpimo riboje. Norėdami gauti šešėlį, sekantį matomą figūrą, taikykite box-shadow neapkirptam aplinkiniam elementui aplink iškirptą.

Ar galiu animuoti ar pereiti tarp clip-path figūrų?

Taip, bet tik tarp dviejų to paties tipo clip-path reikšmių su tuo pačiu taškų skaičiumi — pavyzdžiui, vienas polygon() su 6 taškais pereinantis į kitą polygon() su 6 taškais. Perėjimas tarp iš esmės skirtingų figūrų (circle() į polygon()) paprastai sklandžiai neanimuosis visose naršyklėse.

Ar clip-path galima naudoti fono paveikslėliams, ne tik elemento turiniui?

clip-path iškerpa visą elementą — įskaitant jo background-image, background-color, rėmelius ir turinį kartu — o ne konkrečiai foną. Jei norite iškirpti tik fono paveikslėlį, paliekant kitą turinį neapkirptą, taikykite clip-path atskiram elementui, kuriame yra tik fonas.

Ar clip-path palaikoma visose šiuolaikinėse naršyklėse?

Taip — clip-path su pagrindinėmis figūrų funkcijomis (circle, ellipse, inset, polygon) yra plačiai prieinama pagrindinėse naršyklėse nuo 2020 m. sausio, remiantis MDN suderinamumo duomenimis. Paprastai saugu naudoti gamybinėje aplinkoje be atsarginio varianto naujausioms naršyklių versijoms.