Generator CSS clip-path

To orodje iz predloge oblike ustvari vrednost CSS clip-path — krog, elipso, trikotnik, peterokotnik, šesterokotnik, zvezdo ali zaobljen pravokotnik — in prikaže izrezano obliko v živo na predoglednem okvirju, preden kopiraš CSS. Koordinat polygon() za pogoste oblike ni treba ročno izračunavati.

Kaj je to orodje?

clip-path je lastnost CSS, ki skrije vse zunaj določenega območja elementa, tako da ostane viden le del znotraj oblike — preostanek okvirja elementa je še vedno prisoten v postavitvi, le ne izriše se. Sprejema osnovne funkcije oblik, kot so circle(), ellipse(), inset() in polygon(), zadnja od katerih vzame poljuben seznam koordinatnih parov x/y za določitev katere koli oblike z ravnimi robovi.

Koordinate polygon() je najtežji del za ročno pisanje — peterokotnik, šesterokotnik ali zvezda vsak potrebuje več natančno postavljenih točk, ena napačna pa popači celotno obliko. To orodje te koordinate izračuna namesto tebe iz predloge oblike, takoj posodobi živ predogled in ti da natančen CSS za clip-path za kopiranje.

Vir: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikaciji, ki definirata clip-path in njegove osnovne funkcije oblik.

Zakaj ga uporabiti?

Živ predogled izreže dejanski predogledni okvir v izbrano obliko, tako da vidiš pravi rezultat namesto da si ga zamišljaš iz koordinat.
Sedem predlog oblik — krog, elipsa, trikotnik, peterokotnik, šesterokotnik, zvezda in zaobljen pravokotnik — pokriva veliko večino primerov uporabe clip-path brez ročnega pisanja točk polygon.
Predloge kroga, elipse in zaobljenega pravokotnika vključujejo drsnik velikosti/zaobljenosti, tako da lahko obliko fino nastaviš brez urejanja koordinat.
Ustvari standarden CSS clip-path, pripravljen za lepljenje na kateri koli element.
Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se nikamor ne naloži. Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

Izberi obliko iz spustnega menija — krog, elipsa, trikotnik, peterokotnik, šesterokotnik, zvezda ali zaobljen pravokotnik.
Za oblike kroga, elipse in zaobljenega pravokotnika prilagodi drsnik velikosti/zaobljenosti za fino nastavitev izreza.
Opazuj, kako se predoglední okvir sproti posodablja, ko spreminjaš obliko ali drsnik.
Kopiraj ustvarjen CSS za clip-path in ga prilepi na element, ki ga želiš izrezati.
Za sliko namesto polne barve uporabi enako lastnost clip-path na elementu <img> ali elementu z background-image.

Primer

Vnos

Oblika: Šesterokotnik

Rezultat

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

Izrez v obliki pravilnega šesterokotnika, pogosto uporabljen za profilne fotografije v slogu značke ali ikone funkcij.

Osnovne oblike proti polygon()

Krog, elipsa in inset (zaobljen pravokotnik) so vgrajene osnovne funkcije oblik CSS z lastno preprosto sintakso — polmer ali dva, plus neobvezen položaj sredine ali zaobljenost kota. Trikotnik, peterokotnik, šesterokotnik in zvezda niso vgrajene oblike; vse so izražene s polygon(), ravnim seznamom koordinatnih parov x/y, ki sledijo obrisu oblike. To orodje samodejno izračuna te koordinate za pravilne (enakomerno razporejene) mnogokotnike in petkrako zvezdo, kar je zamuden del, ki ga je težko ročno pravilno izvesti.

Pogosti vzorci clip-path

Krožni avatar ali značka: circle() pri srednjem polmeru, pogosto v kombinaciji s kvadratno izvorno sliko, da se krog ne raztegne v elipso.
Poševni delilnik razdelka: prilagojen mnogokotnik (ni vključen kot predloga tukaj), ki poševi zgornji ali spodnji rob celoširinskega razdelka za nepravokoten prelom strani.
Oblika ikone ali značke za oceno z zvezdicami: predloga zvezde, uporabna kot dekorativna oblika namesto ročno risane SVG za preproste primere.
Mreža slik v obliki šesterokotnika: slike, izrezane v šesterokotnik, razporejene v postavitev v obliki satovja, pogost vzorec strani portfelja/ekipe.
Zaobljen pravokotnik kot lahka alternativa border-radius, kadar želiš, da izrez odreže tudi vsebino, ki sega prek roba podrejenih elementov, saj sam border-radius ne izreže podrejenih elementov brez dodatnega overflow:hidden.

Kombiniranje z drugimi CSS orodji

clip-path se pogosto kombinira s CSS gradientom kot ozadjem, ki se izreže, ali z box-shadow, uporabljenim na ovijajočem elementu (saj clip-path izreže tudi lastno senco elementa, zato je senca na nadrejenem elementu običajna rešitev za izrezano obliko, ki mora še vedno delovati, kot da lebdi).

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

Pogosta vprašanja

Ali clip-path vpliva na velikost postavitve elementa?

Ne — element ohrani svojo prvotno velikost okvirja in položaj za namene postavitve; clip-path spremeni le, kaj se izriše. Okoliški elementi se postavijo, kot da izrez ne bi bil uporabljen, kar te lahko preseneti, če pričakuješ, da se bo izrezana oblika obnašala kot spremenjen element.

Zakaj se box-shadow ne prikaže na mojem izrezanem elementu?

clip-path izreže celoten izris elementa, vključno s katero koli senco, ki jo meče, zato se lastna box-shadow elementa, izrezanega v krog ali mnogokotnik, prav tako odreže na meji izreza. Da dobiš senco, ki sledi vidni obliki, uporabi box-shadow na neizrezanem ovijajočem elementu okoli izrezanega.

Ali lahko animiram ali prehajam obliko clip-path?

Da, vendar le med dvema vrednostma clip-path iste vrste in z enakim številom točk — na primer en polygon() s 6 točkami, ki prehaja v drug polygon() s 6 točkami. Prehod med bistveno drugačnimi oblikami (circle() v polygon()) se v brskalnikih na splošno ne animira gladko.

Ali je mogoče clip-path uporabiti na slikah ozadja, ne le na vsebini elementa?

clip-path izreže celoten element — vključno z background-image, background-color, robovi in vsebino skupaj — ne le ozadja posebej. Če želiš izrezati le sliko ozadja, medtem ko druga vsebina ostane neizrezana, uporabi clip-path na ločenem elementu, ki vsebuje le ozadje.

Ali je clip-path podprt v vseh sodobnih brskalnikih?

Da — clip-path z osnovnimi funkcijami oblik (circle, ellipse, inset, polygon) je po podatkih o združljivosti MDN že od januarja 2020 širše dostopen (Baseline) v vseh večjih brskalnikih. Na splošno je varno uporabljati v produkciji brez rezervne rešitve za trenutne različice brskalnikov.