Generator clip-path CSS

Cum folosești generatorul de clip-path

1. Alege o Formă: Poligon, Cerc, Elipsă sau Inset. Stratul estompat arată elementul întreg, cel luminos arată ce rămâne vizibil după decupare.
2. Trage punctele din editor. Pentru un poligon, fiecare punct este un colț; apasă oriunde în zonă ca să adaugi un punct pe cea mai apropiată latură. Pentru un cerc sau o elipsă, trage centrul și punctele razei. Pentru un inset, trage cele patru puncte de pe margini.
3. Rafinează în câmpurile de dedesubt: lista Puncte (X și Y în procente, cu Elimină și Adaugă punct) pentru poligoane sau câmpurile Rază, Centru X, Centru Y, Sus, Dreapta, Jos, Stânga și Colțuri rotunjite (px) pentru celelalte forme.
4. Pornește mai repede cu Presetări: triunghi, trapez, paralelogram, romb, pentagon, hexagon, octogon, teșit, stea, cruce, săgeți, chevron, balon de dialog, cerc, elipsă și inset.
5. Bifează Aliniază la 5 % pentru valori ordonate și Adaugă -webkit-clip-path (Safari vechi) dacă mai accepți Safari 13.0 sau mai vechi.
6. Opțional, trage o fotografie în Imagine de fundal (opțional) ca să vezi forma pe propria imagine. Fișierul nu este încărcat niciodată.
7. Copiază Cod CSS cu butonul Copiază.

Tastatură: selectează un punct, mută-l cu tastele săgeți (1 %, sau 10 % cu Shift) și apasă Delete ca să elimini un punct al poligonului. Un poligon păstrează cel puțin trei puncte.

Funcțiile de formă din clip-path

clip-path ascunde tot ce se află în afara unei forme. Elementul își păstrează dimensiunea în pagină; doar desenarea și zona pe care se poate apăsa sunt decupate.

• polygon(x1 y1, x2 y2, …) unește punctele în ordine și închide forma. polygon(50% 0%, 100% 100%, 0% 100%) este un triunghi cu vârful în sus. Coordonatele pornesc din colțul stânga sus al elementului.
• circle(r at cx cy): circle(50% at 50% 50%) este cel mai mare cerc centrat în element. O rază în procente este relativă la diagonala elementului împărțită la √2, deci echivalează cu o parte din lățime doar pentru elementele pătrate.
• ellipse(rx ry at cx cy): raza orizontală este o parte din lățime, cea verticală o parte din înălțime.
• inset(sus dreapta jos stânga round rază) decupează un dreptunghi în interiorul marginilor, cu aceeași scriere prescurtată de la una la patru valori ca la margini și cu colțuri rotunjite opționale.

Instrumentul scrie procente, deci forma se scalează odată cu elementul, indiferent de dimensiune.

Sfaturi pentru forme reușite

• Ordinea punctelor unui poligon contează: dacă parcurgi marginea în sens orar (sau antiorar), eviți formele încrucișate, în „fluture”.
• Două forme cu același număr de puncte se pot anima: transition: clip-path 0.4s transformă fluid un hexagon în alt hexagon. Browserul nu poate interpola între poligoane cu număr diferit de puncte.
• clip-path taie și box-shadow, și bordurile. Ca să dai o umbră unei forme decupate, pune filter: drop-shadow() pe un element părinte.
• Zonele decupate nu primesc clicuri sau hover, ceea ce e util pentru butoane cu formă neregulată.