Generator CSS clip-patha

Ovaj alat generira vrijednost CSS clip-path iz predloška oblika — krug, elipsa, trokut, peterokut, šesterokut, zvijezda ili zaobljeni pravokutnik — i prikazuje izrezani oblik uživo na kutiji za pregled prije nego kopirate CSS. Nema potrebe ručno računati polygon() koordinate za uobičajene oblike.

Što je ovaj alat?

clip-path je CSS svojstvo koje skriva sve izvan definiranog područja elementa, ostavljajući vidljivim samo oblik unutra — ostatak kutije elementa i dalje postoji u rasporedu, jednostavno se ne iscrtava. Prihvaća osnovne funkcije oblika poput circle(), ellipse(), inset() i polygon(), pri čemu potonja prima proizvoljan popis parova x/y koordinata za definiranje bilo kojeg oblika s ravnim rubovima.

polygon() koordinate najteži su dio za ručno pisanje — peterokut, šesterokut ili zvijezda svaka treba nekoliko precizno postavljenih točaka, a pogreška na jednoj izobličuje cijeli oblik. Ovaj alat izračunava te koordinate umjesto vas iz predloška oblika, trenutno ažurira prikaz uživo, i daje vam točan clip-path CSS za kopiranje.

Izvor: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikacije koje definiraju clip-path i njegove osnovne funkcije oblika.

Zašto ga koristiti?

Prikaz uživo izrezuje stvarnu kutiju za pregled prema odabranom obliku, pa vidite stvarni rezultat umjesto da ga zamišljate iz koordinata.
Sedam predložaka oblika — krug, elipsa, trokut, peterokut, šesterokut, zvijezda i zaobljeni pravokutnik — pokriva veliku većinu slučajeva korištenja clip-patha bez ručnog pisanja polygon točaka.
Predlošci kruga, elipse i zaobljenog pravokutnika uključuju klizač veličine/zaobljenosti tako da možete fino podesiti oblik bez uređivanja koordinata.
Ispisuje standardni clip-path CSS spreman za lijepljenje na bilo koji element.
Izvodi se u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo. Besplatno, bez prijave, radi na mobitelu.

Kako ga koristiti

Odaberite oblik iz padajućeg izbornika — krug, elipsa, trokut, peterokut, šesterokut, zvijezda ili zaobljeni pravokutnik.
Za oblike kruga, elipse i zaobljenog pravokutnika, prilagodite klizač veličine/zaobljenosti za fino podešavanje izrezivanja.
Pratite kako se kutija za pregled ažurira uživo dok mijenjate oblik ili klizač.
Kopirajte generirani clip-path CSS i zalijepite ga na element koji želite izrezati.
Za sliku umjesto pune boje, primijenite isto svojstvo clip-path na <img> ili element s background-image.

Primjer

Ulaz

Oblik: šesterokut

Izlaz

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%);

Izrezivanje pravilnog šesterokuta, često korišteno za profilne fotografije u stilu značke ili ikone značajki.

Osnovni oblici naspram polygon()

Krug, elipsa i inset (zaobljeni pravokutnik) ugrađene su CSS funkcije osnovnog oblika s vlastitom jednostavnom sintaksom — jedan ili dva radijusa, plus opcionalna pozicija centra ili zaobljenost kutova. Trokut, peterokut, šesterokut i zvijezda nisu ugrađeni oblici; svi se izražavaju pomoću polygon(), ravnog popisa parova x/y koordinata koje prate obris oblika. Ovaj alat automatski izračunava te koordinate za pravilne (jednako razmaknute) poligone i peterokraku zvijezdu, što je naporan dio za ispraviti ručno.

Uobičajeni obrasci clip-patha

Kružni avatar ili značka: circle() sa srednjim radijusom, često u kombinaciji s kvadratnom izvornom slikom kako se krug ne bi razvukao u elipsu.
Kosi razdjelnik sekcije: prilagođeni poligon (nije uključen kao predložak ovdje) koji nagne gornji ili donji rub sekcije pune širine za nepravokutan prijelom stranice.
Oblik zvjezdane ocjene ili značke: predložak zvijezde, koristan kao dekorativan oblik umjesto ručno crtanog SVG-a za jednostavne slučajeve.
Mreža fotografija u obliku šesterokuta: slike izrezane u šesterokut raspoređene u obrazac saća, čest obrazac portfolio/tim stranica.
Zaobljeni pravokutnik kao lakša alternativa border-radiusu kad izrezivanje treba odsjeći i preljevajući sadržaj djece, jer sam border-radius ne izrezuje djecu bez dodatnog overflow:hidden.

Uparivanje s drugim CSS alatima

clip-path se često kombinira s CSS gradijentom kao izrezanom pozadinom, ili s box-shadow primijenjenim na omotani element (budući da clip-path izrezuje i vlastitu sjenu elementa, sjena na roditelju uobičajeno je rješenje za izrezani oblik koji ipak treba djelovati kao da lebdi).

→ Generator CSS gradijenta · Generator border-radius · Generator box-shadow

Često postavljana pitanja

Utječe li clip-path na veličinu rasporeda elementa?

Ne — element zadržava izvornu veličinu i poziciju kutije za potrebe rasporeda; clip-path mijenja samo ono što se iscrtava. Okolni elementi raspoređuju se kao da izrezivanje nije primijenjeno, što može iznenaditi ako očekujete da se izrezani oblik ponaša kao element promijenjene veličine.

Zašto se box-shadow ne prikazuje na mom izrezanom obliku?

clip-path izrezuje cjelokupno iscrtavanje elementa, uključujući svaku sjenu koju baca, pa se vlastiti box-shadow elementa izrezanog krugom ili poligonom odsijeca na granici izrezivanja. Za sjenu koja prati vidljivi oblik, primijenite box-shadow na neizrezani omotni element oko izrezanog.

Mogu li animirati ili prijelaziti oblik clip-patha?

Da, ali samo između dvije vrijednosti clip-path istog tipa i s istim brojem točaka — na primjer, jedan polygon() sa 6 točaka koji prelazi u drugi polygon() sa 6 točaka. Prijelaz između temeljno različitih oblika (circle() u polygon()) općenito se neće glatko animirati u svim preglednicima.

Može li se clip-path koristiti na pozadinskim slikama, ne samo sadržaju elementa?

clip-path izrezuje cijeli element — uključujući njegov background-image, background-color, obrube i sadržaj zajedno — a ne konkretno pozadinu. Ako želite izrezati samo pozadinsku sliku dok ostali sadržaj ostaje neizrezan, primijenite clip-path na zaseban element koji sadrži samo pozadinu.

Je li clip-path podržan u svim modernim preglednicima?

Da — clip-path s osnovnim funkcijama oblika (circle, ellipse, inset, polygon) je Baseline široko dostupan u velikim preglednicima od siječnja 2020., prema MDN-ovim podacima o kompatibilnosti. Općenito je sigurno koristiti ga u produkciji bez rezervne opcije za trenutne verzije preglednika.