Generator CSS Clip-path — Forme Creative și Măști

CSS clip-path decupează elementele în orice formă dorită. Generatorul nostru îți permite să desenezi forme vizual și generează codul clip-path direct.

Formele clip-path

circle() pentru cercuri. ellipse() pentru elipse. polygon() pentru poligoane — triunghiuri, diamante, forme asemănătoare stelei. inset() pentru dreptunghiuri cu colțuri rotunjite. path() pentru căi SVG libere pentru flexibilitate maximă.

Secțiuni diagonale

polygon(0 0, 100% 0, 100% 85%, 0 100%) creează o secțiune cu marginea inferioară diagonală. Aceasta este populară pentru secțiunile hero care sunt mai interesante vizual decât marginile drepte. Combină cu overflow: hidden pentru margini curate.

Animarea clip-path

Formele clip-path sunt animabile dacă au același număr de puncte. Animează de la un dreptunghi la un diamant pentru un efect de dezvăluire. Folosește transition: clip-path 0.3s ease pentru efecte hover fluide pe butoane și carduri.