CSS Clip-Path generaator
Joonista suvalisi hulknurkseid kujundeid – sealhulgas nõgusaid sälke – lohistades punkte reaalajas eelvaatekastil või enda üleslaetud pildil ning kopeeri saadud CSS clip-path: polygon(...) väärtus.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
CSS clip-path aktsepteerib polygon() funktsiooni, mis koosneb suvalisest arvust x/y koordinaatide paaridest – see tähendab, et see võib lõigata kastist kujundeid, mis ulatuvad kaugemale lihtsatest ristkülikutest ja ringidest, milleni enamik inimesi küünib. Konks on selles, et nende koordinaatide käsitsi tippimine on tüütu ja peaaegu võimatu õigesti saada millegi keerukama kui lihtsa kolmnurga puhul – see generaator muudab selle koordinaatide loendi reaalajas eelvaates lohistatavateks punktideks, nii et sinu nähtav kuju on alati see, mida CSS toodab.
Iga eelvaate punkt salvestatakse protsendina kasti laiusest ja kõrgusest – täpselt nii töötabki clip-path: polygon() kapoti all: niiviisi loodud kuju säilitab oma proportsioonid õigesti olenemata sellest, millise suurusega element lõpuks päris lehel on, alates väikesest ikoonimaskist kuni täislaiuses kangelasbännerini. Lohista suvalist punkti piirjoone ümberkujundamiseks, klõpsa serva lähedale, et lisada uus punkt täpselt sinna, kuhu klõpsasid, või topeltklõpsa olemasolevat punkti selle kustutamiseks – redaktor hoiab alati alles vähemalt kolm punkti, sest vähema arvuga ei saa hulknurk eksisteerida.
Kuus kaasasolevat eelseadistust on valitud tõestamaks, et clip-path suudab enamat kui kumerad kujundid: täht ja nool toetuvad mõlemad sissepoole suunatud nürinurkadele, jutumull lõikab muidu tavaalisest ristkülikust välja kolmnurkse saba ja piletiserv surub kaks sälku vastasservadesse nii, nagu näeb välja päris perforeeritud pilet. Laadi suvaline eelseadistus ja jätka sealt lohistamist – miski redaktoris ei lukusta sind algkujusse.
Laadi üles enda pilt, et näha clip-path'i reaalse sisu peal tavalise kasti asemel, või jäta üleslaadimine vahele – siis langeb eelvaade tagasi triibulisele mustrile, nii et väljalõigatud kuju jääb selgelt nähtavaks mõlemal juhul. Nagu iga tööriist sellel saidil, jookseb kogu asi kohapeal brauseris: ükski pilt ei lahku kunagi su seadmest ja generaator jätkab töötamist võrguühenduseta, kui leht on korra laaditud.