Generator CSS Clip-Path

Acest instrument generează o valoare CSS clip-path dintr-o formă presetată — cerc, elipsă, triunghi, pentagon, hexagon, stea sau un dreptunghi rotunjit — și arată forma decupată live pe o casetă de previzualizare înainte să copiezi CSS-ul. Nu e nevoie să calculezi manual coordonatele polygon() pentru forme comune.

Ce este acest instrument?

clip-path este proprietatea CSS care ascunde tot ce este în afara unei regiuni definite a unui element, lăsând vizibilă doar forma din interior — restul casetei elementului este în continuare acolo în layout, pur și simplu nu este desenat. Acceptă funcții de formă de bază precum circle(), ellipse(), inset() și polygon(), ultima luând o listă arbitrară de perechi de coordonate x/y pentru a defini orice formă cu margini drepte.

Coordonatele polygon() sunt partea cea mai grea de scris manual — un pentagon, hexagon sau stea au fiecare nevoie de mai multe puncte plasate precis, iar o greșeală distorsionează întreaga formă. Acest instrument calculează acele coordonate pentru tine dintr-o formă presetată, actualizează previzualizarea live instant și îți oferă CSS-ul clip-path exact de copiat.

Sursă: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specificațiile care definesc clip-path și funcțiile sale de formă de bază.

De ce să-l folosești?

Previzualizarea live decupează o casetă reală de previzualizare la forma aleasă, astfel încât vezi rezultatul real, nu îl imaginezi din coordonate.
Șapte forme presetate — cerc, elipsă, triunghi, pentagon, hexagon, stea și dreptunghi rotunjit — acoperă marea majoritate a cazurilor de utilizare clip-path fără să scrii manual puncte de poligon.
Presetările cerc, elipsă și dreptunghi rotunjit includ un slider de dimensiune/rotunjire, astfel încât poți regla fin forma fără să editezi coordonate.
Generează CSS clip-path standard gata de lipit pe orice element.
Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri. Gratuit, fără înregistrare, funcționează pe mobil.

Cum se folosește

Alege o formă din meniul derulant — cerc, elipsă, triunghi, pentagon, hexagon, stea sau dreptunghi rotunjit.
Pentru formele cerc, elipsă și dreptunghi rotunjit, ajustează sliderul de dimensiune/rotunjire pentru a regla fin decuparea.
Urmărește caseta de previzualizare actualizându-se live pe măsură ce schimbi forma sau sliderul.
Copiază CSS-ul clip-path generat și lipește-l pe elementul pe care vrei să-l decupezi.
Pentru o imagine în loc de o culoare solidă, aplică aceeași proprietate clip-path pe un <img> sau un element cu background-image.

Exemplu

Intrare

Formă: Hexagon

Rezultat

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

O decupare hexagonală regulată, folosită frecvent pentru fotografii de profil în stil insignă sau iconițe de funcționalități.

Forme de bază vs. polygon()

Circle, ellipse și inset (dreptunghi rotunjit) sunt funcții CSS de formă de bază, integrate, cu sintaxa lor simplă — o rază sau două, plus o poziție centrală opțională sau rotunjire de colț. Triunghi, pentagon, hexagon și stea nu sunt forme integrate; toate sunt exprimate cu polygon(), o listă simplă de perechi de coordonate x/y care trasează conturul formei. Acest instrument calculează automat acele coordonate pentru poligoane regulate (spațiate uniform) și o stea cu cinci colțuri, ceea ce este partea plictisitoare de făcut corect manual.

Modele comune de clip-path

Avatar sau insignă circulară: circle() la o rază medie, adesea combinat cu o imagine sursă pătrată, astfel încât cercul să nu fie întins într-o elipsă.
Separator de secțiune înclinat: un poligon personalizat (neinclus ca presetare aici) care înclină marginea de sus sau de jos a unei secțiuni cu lățime completă, pentru o întrerupere de pagină non-dreptunghiulară.
Iconiță de rating cu stea sau formă de insignă: presetarea stea, utilă ca formă decorativă în loc de SVG desenat manual pentru cazuri simple.
Grilă de fotografii hexagonale: imagini decupate hexagonal, aranjate într-un layout de fagure, un model comun de portofoliu/pagină de echipă.
Dreptunghi rotunjit ca alternativă ușoară la border-radius, când ai nevoie ca decuparea să taie și conținutul copil care depășește, deoarece border-radius singur nu decupează copiii fără overflow:hidden suplimentar.

Combinarea cu alte instrumente CSS

clip-path este frecvent combinat cu un gradient CSS ca fundal decupat, sau cu un box-shadow aplicat unui element de învelire (deoarece clip-path decupează și umbra proprie a unui element, o umbră pe un părinte este soluția uzuală pentru o formă decupată care încă trebuie să pară că plutește).

→ Generator de gradient CSS · Generator Border Radius · Generator Box Shadow

Întrebări frecvente

clip-path afectează dimensiunea de layout a elementului?

Nu — elementul își păstrează dimensiunea și poziția casetei originale în scopuri de layout; clip-path schimbă doar ce este desenat. Elementele din jur sunt așezate ca și cum decuparea nu ar fi fost aplicată, ceea ce te poate surprinde dacă te aștepți ca forma decupată să se comporte ca un element redimensionat.

De ce box-shadow nu apare pe forma mea decupată?

clip-path decupează întreaga redare a elementului, inclusiv orice umbră pe care o proiectează, deci propriul box-shadow al unui element decupat cu cerc sau poligon este tăiat la limita decupării. Pentru a obține o umbră care urmează forma vizibilă, aplică box-shadow pe un element de învelire nedecupat, în jurul celui decupat.

Pot anima sau tranziționa o formă clip-path?

Da, dar doar între două valori clip-path de același tip și cu același număr de puncte — de exemplu, un polygon() cu 6 puncte care tranziționează spre alt polygon() cu 6 puncte. Tranziționarea între forme fundamental diferite (un circle() spre un polygon()) în general nu va anima fluid pe toate browserele.

clip-path poate fi folosit pe imagini de fundal, nu doar pe conținutul elementului?

clip-path decupează întregul element — inclusiv background-image-ul, background-color-ul, marginile și conținutul împreună — nu doar fundalul specific. Dacă vrei să decupezi doar o imagine de fundal, păstrând celălalt conținut nedecupat, aplică clip-path pe un element separat care conține doar fundalul.

clip-path este suportat în toate browserele moderne?

Da — clip-path cu funcții de formă de bază (circle, ellipse, inset, polygon) este Baseline larg disponibil pe browserele majore din ianuarie 2020, conform datelor de compatibilitate MDN. Este în general sigur de folosit în producție fără o soluție de rezervă pentru versiunile actuale de browsere.