CSS Clip-Path Generator

CSS clip-path přijímá funkci polygon() složenou z libovolného počtu dvojic souřadnic x/y, což znamená, že dokáže pole vykrojit do tvarů daleko za hranicemi jednoduchých obdélníků a kruhů, po kterých většina lidí sahá. Háček je v tom, že ruční psaní těchto souřadnic je zdlouhavé a pro cokoli složitějšího než základní trojúhelník téměř nemožné – tento generátor mění onen seznam souřadnic na sadu táhly ovladatelných bodů na živém náhledu, takže tvar, který vidíte, je vždy tím tvarem, který CSS vyprodukuje.

Každý bod v náhledu je uložen jako procento šířky a výšky pole, což je přesně to, jak samotný clip-path: polygon() funguje pod kapotou: takto vytvořený tvar si zachovává správné proporce bez ohledu na to, jakou velikost prvek na reálné stránce nakonec dostane, od malé ikonové masky až po banner na celou šířku. Táhněte libovolným bodem a měňte obrys, klikněte poblíž hrany a přidejte nový bod přesně tam, kam jste klikli, nebo dvojitým kliknutím existující bod smažte – editor vždy ponechá alespoň tři body, protože polygon s menším počtem bodů nemůže existovat.

Šest přibalených předvoleb je vybráno tak, aby dokázaly, že clip-path zvládne víc než jen konvexní tvary: hvězda i šipka spoléhají na vyduté úhly směřující dovnitř, bublina vykrajuje z jinak obyčejného obdélníku trojúhelníkový ocásek a vytržený lístek vytlačuje dva zářezy do protilehlých hran, přesně jak vypadá skutečný perforovaný lístek. Načtěte libovolnou předvolbu a tahejte dál – nic v editoru vás neuzamkne do výchozího tvaru.

Nahrajte vlastní obrázek a prohlédněte si clip-path na reálném obsahu namísto holého pole, nebo nahrávání přeskočte a náhled se vrátí k pruhovanému vzoru, takže vyříznutý tvar zůstane v obou případech jasně viditelný. Stejně jako všechny nástroje na tomto webu běží celá věc lokálně v prohlížeči: žádný obrázek nikdy neopustí vaše zařízení a generátor funguje offline, jakmile se stránka načte.