Generátor CSS Clip-path — Kreativní Tvary a Masky

CSS clip-path ořízne prvky do libovolného tvaru. Náš generátor vám umožní vizuálně kreslit tvary a okamžitě generovat clip-path kód.

Tvary clip-path

circle() pro kruhy. ellipse() pro elipsy. polygon() pro mnohoúhelníky — trojúhelníky, diamanty, hvězdicové tvary. inset() pro obdélníky se zaoblenými rohy. path() pro volné SVG cesty pro maximální flexibilitu.

Diagonální sekce

polygon(0 0, 100 % 0, 100 % 85 %, 0 100 %) vytvoří sekci s diagonálním dolním okrajem. To je populární pro hero sekce, které jsou vizuálně zajímavější než rovné okraje. Kombinujte s overflow: hidden pro čisté okraje.

Animování clip-path

Tvary clip-path jsou animovatelné, pokud mají stejný počet bodů. Animujte z obdélníku na diamant pro efekt odkrytí. Použijte transition: clip-path 0.3s ease pro plynné hover efekty na tlačítkách a kartách.