CSS Clip-Path Generator

A CSS clip-path elfogad egy sokszög() függvényt, amely tetszőleges számú x/y koordinátapárból áll, ami azt jelenti, hogy a legtöbb ember által elért egyszerű téglalapokon és körökön messze túlmenően képes egy dobozt olyan alakzatokra faragni. A bökkenő az, hogy ezeknek a koordinátáknak a kézzel történő beírása fárasztó, és szinte lehetetlen az alap háromszögön kívül bármit is helyesen megadni – ez a generátor ezt a koordinátalistát húzható pontok halmazává alakítja az élő előnézetben, így a látható alakzat mindig a CSS által létrehozott alakzat lesz.

Az előnézet minden pontja a doboz szélességének és magasságának százalékában van tárolva, pontosan így működik a poligon() is a motorháztető alatt: az így megépített alakzat helyesen tartja az arányait, függetlenül attól, hogy az elem milyen méretben kerül egy valódi oldalon, a kis ikonmaszktól a teljes szélességű hős szalaghirdetésig. Húzza bármelyik pontot a körvonal átalakításához, kattintson egy él közelébe, hogy új pontot adjon hozzá pontosan oda, ahol kattintott, vagy kattintson duplán egy meglévő pontra a törléshez – a szerkesztő mindig megtart legalább három pontot, mivel egy sokszög nem létezhet kevesebbel.

A hat csomagban lévő előre beállított beállítás bizonyítani tudja, hogy a klipút többre képes, mint a domború alakzatok: a csillag és a nyíl egyaránt befelé mutató reflexszögekre támaszkodik, a szövegbuborék háromszög alakú farkát farag az egyébként sima téglalapból, és a jegy csonkja két bevágást horpad a szemközti élekre, ahogyan egy valódi perforált jegy néz ki. Töltsön be bármilyen előre beállított értéket, és húzza tovább onnan – a szerkesztőben semmi sem rögzíti a kezdő alakzatot.

Töltsd fel saját képedet, hogy megtekinthesd a klip-útvonalat a valódi tartalomhoz képest egy sima doboz helyett, vagy hagyd ki a feltöltést teljesen, és az előnézet csíkos mintára esik vissza, így a vágott forma mindkét esetben jól látható marad. Mint minden eszköz ezen az oldalon, az egész helyileg fut a böngészőben: soha egyetlen kép sem hagyja el az eszközt, és az oldal betöltése után a generátor továbbra is offline állapotban működik.