CSS Clip-Path Generaator

See tööriist genereerib CSS clip-path väärtuse kuju eelseadistusest — ring, ellips, kolmnurk, viisnurk, kuusnurk, täht või ümarnurkne ristkülik — ja näitab lõigatud kuju elavalt eelvaate kastil enne CSS-i kopeerimist. pole vaja polygon() koordinaate levinud kujude jaoks käsitsi arvutada.

Mis see tööriist on?

clip-path on CSS omadus, mis peidab kõik väljaspool elemendi defineeritud piirkonda, jättes nähtavaks ainult selle sisemuse kuju — elemendi kasti ülejäänud osa on paigutuses ikka olemas, seda lihtsalt ei joonistata. See aktsepteerib põhikuju funktsioone nagu circle(), ellipse(), inset() ja polygon(), millest viimane võtab suvalise nimekirja x/y koordinaatpaare, et defineerida mis tahes sirgejoonelist kuju.

polygon() koordinaadid on käsitsi kirjutamiseks kõige raskem osa — viisnurk, kuusnurk või täht vajab kumbki mitut täpselt paigutatud punkti, ja ühe valesti panek moonutab kogu kuju. See tööriist arvutab need koordinaadid sinu eest kuju eelseadistuse põhjal, uuendab elavat eelvaadet kohe ja annab täpse clip-path CSS-i kopeerimiseks.

Allikas: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — spetsifikatsioonid, mis defineerivad clip-path'i ja selle põhikuju funktsioonid.

Miks seda kasutada?

Elav eelvaade lõikab päris eelvaate kasti valitud kujuni, nii et näed tegelikku tulemust koordinaatide ettekujutamise asemel.
Seitse kuju eelseadistust — ring, ellips, kolmnurk, viisnurk, kuusnurk, täht ja ümarnurkne ristkülik — katavad enamiku clip-path kasutusjuhtudest ilma polygon punktide käsitsi kirjutamiseta.
Ringi, ellipsi ja ümarnurkse ristküliku eelseadistustel on suuruse/ümaruse liugur, et kuju koordinaate muutmata täpsustada.
Väljastab standardse clip-path CSS-i, mis on valmis kleepimiseks igale elemendile.
Töötab täielikult su brauseris — midagi, mida seadistad, ei laadita kuhugi üles. Tasuta, registreerimist pole vaja, töötab mobiilis.

Kuidas kasutada

Vali kuju rippmenüüst — ring, ellips, kolmnurk, viisnurk, kuusnurk, täht või ümarnurkne ristkülik.
Ringi, ellipsi ja ümarnurkse ristküliku kujude puhul kohanda suuruse/ümaruse liugurit, et lõiget täpsustada.
Jälgi, kuidas eelvaate kast uueneb elavalt, kui muudad kuju või liugurit.
Kopeeri genereeritud clip-path CSS ja kleebi see elemendile, mida soovid lõigata.
Pildi jaoks ühevärvilise pinna asemel rakenda sama clip-path omadus <img>-ile või elemendile, millel on background-image.

Näide

Sisend

Kuju: Kuusnurk

Tulemus

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

Regulaarne kuusnurkne lõige, mida kasutatakse tavaliselt märgistiilis profiilipiltide või funktsiooniikoonide jaoks.

Põhikujud vs. polygon()

Ring, ellips ja inset (ümarnurkne ristkülik) on sisseehitatud CSS põhikuju funktsioonid oma lihtsa süntaksiga — raadius või kaks, pluss valikuline kese-asukoht või nurgaümardus. Kolmnurk, viisnurk, kuusnurk ja täht ei ole sisseehitatud kujud; need kõik väljendatakse polygon()-iga, lameda x/y koordinaatpaaride nimekirjaga, mis jälgib kuju kontuuri. See tööriist arvutab need koordinaadid regulaarsete (ühtlaselt paigutatud) hulknurkade ja viieharulise tähe jaoks automaatselt, mis on käsitsi õigesti tegemise kõige tüütum osa.

Levinud clip-path mustrid

Ringikujuline avatar või märk: circle() keskmise raadiusega, sageli kombineerituna ruudukujulise lähtepildiga, et ring ei venitaks ellipsiks.
Nurgeline sektsioonieraldaja: kohandatud hulknurk (siin eelseadistusena ei sisaldu), mis kaldub täislaiuses sektsiooni ülemist või alumist serva mitteristkülikukujulise leheeralduse jaoks.
Tärnihindamise ikoon või märk: tähe eelseadistus, kasulik dekoratiivse kujuna käsitsi joonistatud SVG asemel lihtsatel juhtudel.
Kuusnurkne fotogalerii: kuusnurgaga lõigatud pildid mesitaru-paigutuses, levinud portfoolio/meeskonnalehe muster.
Ümarnurkne ristkülik kui kergekaaluline alternatiiv border-radius'ele, kui vajad, et lõige lõikaks ka ülevoolava lapssisu, kuna border-radius üksinda ei lõika lapsi ilma täiendava overflow:hidden'ita.

Paaris teiste CSS tööriistadega

clip-path'i kombineeritakse sageli CSS gradiendiga lõigatava taustana või box-shadow'ga, mis on rakendatud ümbritsevale elemendile (kuna clip-path lõikab ka elemendi enda varju, on vanemale rakendatud vari tavaline lahendus lõigatud kuju jaoks, mis peab siiski hõljuvana näima).

→ CSS Gradient Generaator · Border Radius Generaator · Box Shadow Generaator

Korduma kippuvad küsimused

Kas clip-path mõjutab elemendi paigutuse suurust?

Ei — element säilitab paigutuse jaoks oma algupärase kasti suuruse ja asukoha; clip-path muudab ainult seda, mis joonistatakse. Ümbritsevad elemendid paigutatakse nii, nagu lõiget poleks rakendatud, mis võib üllatada, kui ootad, et lõigatud kuju käituks nagu ümbermõõdetud element.

Miks ei näita mu lõigatud kujul box-shadow?

clip-path lõikab kogu elemendi renderduse, sealhulgas selle heidetud varju, seega lõigatakse ringi- või hulknurgakujuliselt lõigatud elemendi enda box-shadow lõikepiiril ära. Et saada vari, mis järgib nähtavat kuju, rakenda box-shadow lõigatud elementi ümbritsevale lõikamata mähiselemendile.

Kas saan clip-path kuju animeerida või üleminekuga muuta?

Jah, aga ainult kahe sama tüüpi ja sama arvu punktidega clip-path väärtuse vahel — näiteks üks polygon() 6 punktiga, mis läheb üle teiseks polygon()-iks 6 punktiga. Üleminek fundamentaalselt erinevate kujude vahel (circle() polygon()-iks) üldiselt ei animeeru sujuvalt brauserite vahel.

Kas clip-path'i saab kasutada taustapiltidel, mitte ainult elemendi sisul?

clip-path lõikab kogu elemendi — kaasa arvatud selle background-image, background-color, piirjooned ja sisu koos —, mitte konkreetselt tausta. Kui soovid lõigata ainult taustapilti, jättes muu sisu lõikamata, rakenda clip-path eraldi elemendile, mis hoiab ainult tausta.

Kas clip-path on toetatud kõigis kaasaegsetes brauserites?

Jah — clip-path põhikuju funktsioonidega (circle, ellipse, inset, polygon) on olnud MDN-i ühilduvusandmete kohaselt laialt saadaval baastasemel alates 2020. aasta jaanuarist. Seda on üldiselt turvaline kasutada tootmiskeskkonnas ilma varulahenduseta praeguste brauseriversioonide jaoks.