CSS Clip-Path Generátor
Rajzolj tetszőleges sokszög alakzatokat – akár konkáv bevágásokkal is – fogási pontok húzásával egy élő előnézeti dobozon vagy a saját feltöltött képeden, és másold ki a kapott CSS clip-path: polygon(...) értéket.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
A CSS clip-path egy polygon() függvényt fogad el, ami tetszőleges számú x/y koordinátapárból áll, ami azt jelenti, hogy egy dobozt olyan formákra vághatunk, amelyek messze túlmutatnak az egyszerű téglalapokon és körökön, amiket a legtöbben használni szoktak. A bökkenő az, hogy ezeket a koordinátákat kézzel beírni fárasztó és szinte lehetetlen jól eltalálni bárminél, ami bonyolultabb egy alap háromszögnél – ez a generátor a koordinátalistát egy élő előnézeten mozgatható pontokká alakítja, így a látott forma mindig az a forma, amit a CSS létrehoz.
Az előnézet minden pontja a doboz szélességének és magasságának százalékában tárolódik, pontosan úgy, ahogy a clip-path: polygon() is működik a háttérben: az így felépített forma megtartja a helyes arányait, függetlenül attól, hogy az elem végül mekkora lesz egy valós oldalon, egy apró ikonmaszktól egy teljes szélességű hős szalaghirdetésig. Húzz bármelyik pontot a körvonal átalakításához, kattints egy él közelébe, hogy pontosan oda új pontot adj hozzá, vagy duplán kattints egy meglévő pontra a törléséhez – a szerkesztő mindig legalább három pontot megtart, mivel ennél kevesebbel nem létezhet sokszög.
A hat mellékelt alapforma azt hivatott bizonyítani, hogy a clip-path képes többre a konvex alakzatoknál: a csillag és a nyíl egyaránt homorú szögekre támaszkodik, amelyek befelé mutatnak, a beszédbuborék egy egyébként sima téglalapból vág ki egy háromszög alakú fület, a jegycsonk pedig két bevágást nyom a szemközti élekbe, pontosan úgy, ahogy egy valódi perforált jegy kinéz. Tölts be bármelyik alapformát, és húzogasd tovább – a szerkesztő semmiben sem köt a kiinduló alakzathoz.
Töltsd fel a saját képedet, hogy a clip-path-t valós tartalommal szemben lásd előnézetben egy sima doboz helyett, vagy hagyd ki a feltöltést teljesen, és az előnézet csíkos mintára vált vissza, hogy a kivágott forma így is jól látható maradjon. Mint az oldal összes eszköze, ez is teljes egészében helyben, a böngészőben fut: egyetlen kép sem hagyja el az eszközödet, és a generátor offline is működik, miután az oldal betöltődött.