CSS Clip-Path Generator

Clip-path CSS přijímá funkci polygon() vytvořenou z libovolného počtu párů souřadnic x/y, což znamená, že dokáže vyřezat rámeček 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í zadávání těchto souřadnic je zdlouhavé a téměř nemožné se dostat správně k čemukoli mimo základní trojúhelník – tento generátor přemění tento seznam souřadnic na sadu bodů, které lze přetáhnout v živém náhledu, takže tvar, který vidíte, je vždy tvarem, který vytvoří CSS.

Každý bod v náhledu je uložen jako procento šířky a výšky rámečku, což je přesně to, jak clip-path: samotná polygon() funguje pod kapotou: takto vytvořený tvar si zachovává správné proporce bez ohledu na to, jakou velikost má prvek na skutečné stránce, od masky malé ikony až po banner hrdiny s plnou šířkou. Přetažením libovolného bodu změníte tvar obrysu, kliknutím blízko okraje přidáte nový bod přesně tam, kam jste klikli, nebo poklepáním na existující bod jej odstraňte – editor vždy zachová alespoň tři body, protože mnohoúhelník nemůže existovat s méně.

Šest sdružených předvoleb je vybráno tak, aby dokázalo, že cesta klipu dokáže víc než konvexní tvary: hvězda i šipka se spoléhají na reflexní úhly, které směřují dovnitř, řečová bublina vyřezává trojúhelníkový ocas z jinak hladkého obdélníku a pahýl lístku prohlubuje dva zářezy do protilehlých hran tak, jak vypadá skutečný perforovaný lístek. Načtěte libovolnou předvolbu a pokračujte v tažení – nic v editoru vás nezamyká do výchozího tvaru.

Nahrajte svůj vlastní obrázek, abyste zobrazili náhled cesty klipu oproti skutečnému obsahu namísto obyčejného pole, nebo nahrávání úplně přeskočte a náhled se vrátí do pruhovaného vzoru, takže vyříznutý tvar zůstane jasně viditelný v obou směrech. Jako každý nástroj na tomto webu vše běží lokálně v prohlížeči: z vašeho zařízení nikdy neopustí žádný obrázek a generátor po načtení stránky funguje offline.