CSS-i lõiketee generaator
Joonistage suvalised hulknurga kujundid – sealhulgas nõgusad sälgud –, lohistades reaalajas eelvaatekasti või enda üleslaaditud pildi punkte, ja kopeerige saadud CSS-i lõiketee: polügon(...) väärtus.
Tulemus
CSS-i lõiketee aktsepteerib suvalisest arvust x/y koordinaadipaaridest koosnevat polügon()-funktsiooni, mis tähendab, et see võib raiuda kasti kujunditeks, mis on palju kaugemal kui lihtsad ristkülikud ja ringid, mille poole enamik inimesi ulatub. Konks on selles, et nende koordinaatide käsitsi tippimine on tüütu ja peaaegu võimatu midagi peale põhikolmnurga õigeks saada – see generaator muudab selle koordinaatide loendi reaalajas eelvaates lohistatavate punktide komplektiks, nii et kuvatav kujund on alati CSS-i loodud kujund.
Eelvaate iga punkt salvestatakse protsendina kasti laiusest ja kõrgusest, mis on täpselt nii, kuidas clip-path: polügon() ise töötab kapoti all: sellisel viisil ehitatud kujund hoiab oma proportsioonid õiged olenemata sellest, millise suurusega element pärislehele jõuab, alates väikesest ikoonimaskist kuni täislaiuse kangelasbännerini. Kontuuri ümberkujundamiseks lohistage suvalist punkti, klõpsake serva lähedal, et lisada uus punkt täpselt sinna, kus klõpsasite, või topeltklõpsake olemasoleval punktil selle kustutamiseks – redaktor säilitab alati vähemalt kolm punkti, kuna vähemate punktidega hulknurka ei saa eksisteerida.
Kuus komplekteeritud eelseadistust on valitud tõestamaks, et lõiketee suudab teha enamat kui kumerad kujundid: täht ja nool tuginevad mõlemad sissepoole suunatud peegeldusnurkadele, kõnemull nikerdab muidu tavalisest ristkülikust kolmnurkse saba ja piletitükk mõlgib kaks sälku vastasservadesse nii, nagu tõeline perforeeritud pilet välja näeb. Laadige kõik eelseaded ja lohistage sealt edasi – miski redaktoris ei lukusta teid algkujule.
Laadige üles oma pilt, et vaadata klipitee eelvaadet tegeliku sisuga, mitte tavalise kastiga, või jätke üleslaadimine täielikult vahele ja eelvaade taandub triibulisele mustrile, nii et lõikekuju jääb mõlemal juhul selgelt nähtavaks. Nagu kõik selle saidi tööriistad, töötab kogu asi brauseris lokaalselt: teie seadmest ei lahku kunagi ühtegi kujutist ja generaator töötab pärast lehe laadimist võrguühenduseta.
Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.
Aktsepteeritud vormingud ja reeglid
- Lohistavad punktikäepidemed (hiire, puute- ja nooleklahvi nihutamine) koos reaalajas värskendatava lõiketee: hulknurga(...) väljundiga nende liigutamisel.
- Klõpsake mis tahes serva lähedal, et lisada sinna uus punkt, topeltklõpsake punktil selle eemaldamiseks (alati säilitatakse vähemalt 3 punkti).
- Eelseaded noole-, tähe-, kuusnurga-, kõnemulli- ja piletiotsakukujude jaoks – sealhulgas tõeliselt nõgusad, mittekumerad piirjooned – pluss valikuline kujutise üleslaadimine, et saaksite klippi oma pildil eelvaadata.
Peamised eelised
Kasutusjuhtumid
- • Lõika kangelase kujutis või kaardi pisipilt nooleks, täheks või kuusnurgaks, lohistades eelseadistatud punkte, seejärel kopeerige täpne lõiketee: hulknurk(...) CSS.
- • Looge tõeliselt nõgus kuju – kõnemulli saba või sälguline piletitükk –, mida lihtne äärise raadiusega või maski kujutis ei suudaks kunagi luua.
- • Laadige üles oma foto, et kontrollida täpselt, kuidas kohandatud hulknurga kärpimine enne lõiketee väärtuse pärislehele saatmist välja näeb.
Hinda seda tööriista
