CSS Clip-Path Generator

CSS clip-path prihvaća funkciju polygon() koja se sastoji od bilo kojeg broja x/y koordinatnih parova, što znači da može isklesati kutiju u oblike daleko izvan jednostavnih pravokutnika i krugova za kojima većina ljudi poseže. Kvaka je u tome što je ručno upisivanje tih koordinata zamorno i gotovo ga je nemoguće ispraviti za bilo što osim osnovnog trokuta — ovaj generator taj popis koordinata pretvara u skup točaka koje se mogu povlačiti na pretpregledu uživo, tako da je oblik koji vidite uvijek oblik koji proizvodi CSS.

Svaka točka na pretpregledu pohranjuje se kao postotak širine i visine okvira, što je upravo način na koji sam clip-path: polygon() funkcionira ispod haube: oblik izgrađen na ovaj način održava svoje proporcije točnim bez obzira na veličinu elementa na stvarnoj stranici, od male maske ikone do bannera heroja pune širine. Povucite bilo koju točku da biste preoblikovali obris, kliknite blizu ruba da biste dodali novu točku točno tamo gdje ste kliknuli ili dvaput kliknite postojeću točku da biste je izbrisali — uređivač uvijek čuva najmanje tri točke, budući da poligon ne može postojati s manje.

Šest unaprijed postavljenih postavki odabrano je kako bi se dokazalo da isječkana putanja može učiniti više od konveksnih oblika: i zvijezda i strelica oslanjaju se na refleksne kutove koji su usmjereni prema unutra, govorni mjehurić izrezuje trokutasti rep iz inače običnog pravokutnika, a čep ulaznice udubljuje dva ureza u suprotne rubove onako kako izgleda prava perforirana ulaznica. Učitajte bilo koju unaprijed postavljenu postavku i nastavite povlačiti odatle — ništa u uređivaču vas ne zaključava u početni oblik.

Učitajte vlastitu sliku kako biste pregledali putanju isječka u odnosu na pravi sadržaj umjesto običnog okvira ili u potpunosti preskočite prijenos i pregled se vraća na prugasti uzorak tako da izrezani oblik ostaje jasno vidljiv u svakom slučaju. Kao i svaki alat na ovoj stranici, cijela se stvar izvodi lokalno u pregledniku: nijedna slika ne napušta vaš uređaj, a generator nastavlja raditi izvan mreže nakon što se stranica učita.