CSS Clip-Path Generator

CSS clip-path akceptuje funkciu polygon() vytvorenú z ľubovoľného počtu párov súradníc x/y, čo znamená, že dokáže vyrezať rámček do tvarov ďaleko za hranicami jednoduchých obdĺžnikov a kruhov, po ktorých väčšina ľudí siaha. Háčik je v tom, že ručné písanie týchto súradníc je zdĺhavé a takmer nemožné dostať sa správne k čomukoľvek mimo základného trojuholníka – tento generátor premení tento zoznam súradníc na súbor bodov, ktoré je možné presúvať v živom náhľade, takže tvar, ktorý vidíte, je vždy tvar, ktorý vytvára CSS.

Každý bod náhľadu je uložený ako percento šírky a výšky rámčeka, presne tak funguje clip-path: samotný polygon() pod kapotou: takto vytvorený tvar si zachováva správne proporcie bez ohľadu na to, akú veľkosť má prvok na skutočnej stránke, od malej masky ikony až po banner hrdinu s plnou šírkou. Potiahnutím ľubovoľného bodu zmeníte tvar obrysu, kliknutím v blízkosti okraja pridáte nový bod presne tam, kde ste klikli, alebo dvojitým kliknutím na existujúci bod ho odstráňte – editor vždy zachová aspoň tri body, pretože polygón nemôže existovať s menším počtom bodov.

Šesť pribalených predvolieb je vybraných tak, aby dokázalo, že cesta klipu dokáže viac než len konvexné tvary: hviezda aj šípka sa spoliehajú na reflexné uhly smerujúce dovnútra, rečová bublina vyrezáva trojuholníkový chvost z inak obyčajného obdĺžnika a útržok lístka má dva zárezy na opačných okrajoch, ako vyzerá skutočný perforovaný lístok. Načítajte ľubovoľnú predvoľbu a pokračujte v ťahaní – nič v editore vás nezablokuje do počiatočného tvaru.

Odovzdajte svoj vlastný obrázok a zobrazte ukážku cesty klipu oproti skutočnému obsahu namiesto obyčajného poľa, alebo nahrávanie úplne preskočte a ukážka sa vráti späť na pruhovaný vzor, takže vyrezaný tvar zostane jasne viditeľný v oboch smeroch. Ako každý nástroj na tejto stránke, celá vec beží lokálne v prehliadači: žiadny obrázok nikdy neopustí vaše zariadenie a generátor po načítaní stránky funguje offline.