Generator CSS Clip-Path

Clip-path CSS acceptă o funcție polygon() formată din orice număr de perechi de coordonate x/y, ceea ce înseamnă că poate sculpta o cutie în forme mult dincolo de dreptunghiurile și cercurile simple la care ajung majoritatea oamenilor. Problema este că introducerea manuală a acestor coordonate este plictisitoare și aproape imposibil de corectat pentru orice dincolo de un triunghi de bază - acest generator transformă acea listă de coordonate într-un set de puncte care pot fi trasate într-o previzualizare live, astfel încât forma pe care o vedeți este întotdeauna forma pe care o produce CSS.

Fiecare punct din previzualizare este stocat ca un procent din lățimea și înălțimea casetei, ceea ce este exact modul în care clip-path: polygon() însuși funcționează sub capotă: o formă construită în acest fel își păstrează proporțiile corecte, indiferent de dimensiunea la care se găsește elementul într-o pagină reală, de la o mască de pictogramă mică la un banner erou cu lățime completă. Trageți orice punct pentru a remodela conturul, faceți clic aproape de o margine pentru a adăuga un nou punct exact acolo unde ați făcut clic sau faceți dublu clic pe un punct existent pentru a-l șterge - editorul păstrează întotdeauna cel puțin trei puncte, deoarece un poligon nu poate exista cu mai puține.

Cele șase presetări sunt alese pentru a dovedi că clip-path poate face mai mult decât forme convexe: steaua și săgeata se bazează ambele pe unghiuri reflexe care îndreaptă spre interior, balonul de vorbire sculptează o coadă triunghiulară dintr-un dreptunghi altfel simplu, iar ciotul biletului îndoaie două crestături în marginile opuse așa cum arată un bilet perforat real. Încărcați orice presetare și continuați să trageți de acolo - nimic despre editor nu vă blochează în forma de pornire.

Încărcați propria imagine pentru a previzualiza traseul clipului în raport cu conținutul real în loc de o casetă simplă sau omiteți încărcarea complet și previzualizarea se întoarce la un model în dungi, astfel încât forma tăiată să rămână clar vizibilă în orice caz. Ca orice instrument de pe acest site, totul rulează local în browser: nicio imagine nu părăsește dispozitivul dvs., iar generatorul continuă să funcționeze offline odată ce pagina s-a încărcat.