Generator de triunghiuri și săgeți CSS
Alege o direcție, dimensiune și culoare, iar această unealtă generează regula CSS care desenează un triunghi sau o săgeată — fără a fi nevoie de imagini.
Generator de triunghiuri și săgeți CSS
Alege o direcție, o lățime, înălțime și culoare, iar această unealtă scrie regula CSS care desenează forma — un triunghi care indică sus, jos, stânga sau dreapta, sau un triunghi de colț pentru un badge în stil panglică. Nu există fișier de imagine de exportat și nu există markup suplimentar de adăugat: forma este puro CSS, deci se scalează perfect la orice dimensiune și rămâne clară pe ecranele cu densitate ridicată. Este blocul de bază din spatele meniurilor derulante, indicatoarelor acordeon, badge-urilor cu panglică și al micului indicator pe un tooltip sau o bulă de chat.
Două tehnici sunt suportate. Border trick setează o casetă de dimensiune zero, face granițele opuse transparente și colorează restul — rețeta clasică, cu cel mai larg suport de browser. clip-path desenează forma pe o casetă dimensionată folosind un poligon, ceea ce este mai ușor de citit în instrumente de dezvoltare și de animat. Comutați între ele cu opțiunea de tehnică.
Activează "Utilizează ca pseudo-element ::after" pentru o regulă scopată la ::after, poziționate absolut, gata de a fi atașate unui element care are deja poziționare relativă — exact ceea ce are nevoie o săgeată de meniu derulant sau un indicator de tooltip, fără HTML suplimentar. Activează "Balon de vorbire cu săgeată atașată" și unealta generează două reguli împreună: o casetă de apel cu bordură și rotunjită, și o coadă de săgeată atașată la marginea sa, indicând direcția pe care ai ales-o — forma din spatele unei bule de chat sau a unui popover de text de ajutor.
Tot se execută în browserul tău: nimic din ceea ce configurezi nu este trimis nicăieri. Copiază CSS-ul generat, descarcă-l ca fișier .txt sau trimite-l la intrarea altei unelte — generatoare de border-radius sau clip-path, de exemplu — pentru a continua să rafinezi forma.