CSS Clip-Path Generator

CSS clip-path prihvaća polygon() funkciju sastavljenu od proizvoljnog broja x/y parova koordinata, što znači da može izrezati okvir u oblike koji nadilaze jednostavne pravokutnike i krugove koje većina ljudi koristi. Kvaka je u tome što je ručno upisivanje tih koordinata zamorno i gotovo nemoguće za sve osim osnovnog trokuta – ovaj generator pretvara taj popis koordinata u skup točaka koje možete povlačiti na pregledu uživo, tako da je oblik koji vidite uvijek onaj koji CSS proizvodi.

Svaka točka na pregledu pohranjuje se kao postotak širine i visine okvira, što je upravo onako kako clip-path: polygon() funkcionira ispod haube: ovako izgrađen oblik zadržava ispravne proporcije bez obzira na konačnu veličinu elementa na stvarnoj stranici, od male maske ikone do hero-bannera pune širine. Povucite bilo koju točku da promijenite obris, kliknite blizu ruba da dodate novu točku točno tamo gdje ste kliknuli ili dvaput kliknite postojeću točku da je izbrišete – uređivač uvijek zadržava najmanje tri točke, jer poligon ne može postojati s manje.

Šest priloženih predložaka odabrano je da pokažu kako clip-path može više od konveksnih oblika: zvijezda i strelica oslanjaju se na izbočene kutove koji su usmjereni prema unutra, oblačić za govor izrezuje trokutasti rep iz inače običnog pravokutnika, a nazubljena ulaznica utiskuje dva zareza na suprotne rubove, baš kao što izgleda prava perforirana ulaznica. Učitajte bilo koji predložak i nastavite povlačiti odatle – ništa u uređivaču vas ne zaključava u početni oblik.

Učitajte vlastitu sliku da pregledate clip-path na stvarnom sadržaju umjesto na običnom okviru ili preskočite učitavanje i pregled će se vratiti na prugasti uzorak tako da izrezani oblik ostane jasno vidljiv u svakom slučaju. Kao i svaki alat na ovom sajtu, cijela stvar radi lokalno u pregledniku: nijedna slika nikada ne napušta vaš uređaj, a generator nastavlja raditi izvan mreže nakon što se stranica učita.