Generator CSS Clip-path
Generatorul CSS clip-path produce valori clip-path pentru forme uzuale — triunghi, săgeată, pentagon, hexagon, stea, chevron, cerc, elipsă și inset rotunjit — cu previzualizare live.
Despre acest instrument
Generatorul CSS clip-path produce valori clip-path pentru forme uzuale — triunghi, săgeată, pentagon, hexagon, stea, chevron, cerc, elipsă și inset rotunjit — cu previzualizare live.
Cum se folosește
- Alege o formă din listă.
- Alege o culoare de umplere pentru previzualizare.
- Apasă Copy CSS și aplică clip-path oricărui element sau imagini.
Bine de știut
- clip-path ascunde tot ce se află în afara formei, așa că nu ai nevoie de o mască de imagine sau de un fișier SVG.
- polygon() primește o listă de puncte x y în procente, care se scalează odată cu elementul.
- circle(50% at 50% 50%) decupează un element într-un cerc centrat.
- inset() cu round adaugă colțuri rotunjite unei decupări dreptunghiulare.
- Formele de bază clip-path sunt acceptate în toate browserele majore actuale.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum decupez o imagine într-o formă cu CSS?
Aplică un clip-path imaginii, de exemplu clip-path: polygon(50% 0%, 0% 100%, 100% 100%); pentru un triunghi.
Care este diferența dintre clip-path și mask?
clip-path decupează o formă vectorială cu margini nete. mask folosește o imagine sau un gradient și poate crea margini moi, parțial transparente.
Poate fi animat clip-path?
Da, dacă ambele forme folosesc aceeași funcție și același număr de puncte, browserul poate face tranziția între ele.
clip-path afectează clicurile?
Da. Zonele din afara formei decupate nu sunt randate și nu primesc evenimente de pointer.