Generator CSS Triangle

Alege o direcție, dimensiune și culoare pentru a construi un triunghi din CSS simplu, apoi copiază codul. Folosește tehnica clasică a div-ului cu lățime și înălțime zero cu margini transparente — fără fișiere imagine, fără SVG, fără clip-path — doar câteva declarații de margine pe care orice browser le înțelege.

Ce este acest instrument?

CSS nu are o formă dedicată de triunghi, deci triunghiurile sunt construite cu o soluție bine cunoscută: ia un element cu lățime zero și înălțime zero, dă-i o margine solidă pe o parte și margini transparente pe celelalte două laturi adiacente. Fiindcă marginile adiacente se întâlnesc la un unghi de 45 de grade, marginile transparente se îngustează spre un punct, lăsând doar marginea colorată vizibilă ca un triunghi.

Acest instrument construiește acea structură pentru tine: alege în ce direcție ar trebui să indice triunghiul, cât de mare ar trebui să fie și ce culoare ar trebui să aibă, apoi urmărește previzualizarea live actualizându-se și copiază CSS-ul exact. Este același truc de bază folosit pe tot web-ul pentru săgeți doar-CSS, indicatoare de tooltip și carete de meniuri derulante.

Sursă: CSS Backgrounds and Borders Module Level 3, W3C — definește cum se întâlnesc marginile adiacente la un unghi, care este mecanismul pe care se bazează această tehnică de triunghi.

De ce să-l folosești?

Previzualizarea live randează triunghiul real, astfel încât să confirmi dimensiunea, direcția și culoarea înainte de a copia ceva.
Acoperă toate cele patru direcții de bază — sus, jos, stânga, dreapta — cu un singur control.
Nu sunt necesare fișiere imagine sau SVG — un triunghi construit astfel este doar câteva linii de CSS.
Util pentru indicatoare de tooltip, carete de meniuri derulante/acordeon, marcatori personalizați de listă și forme decorative simple.
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 direcție — triunghiul indică în sus, jos, stânga sau dreapta, în funcție de care parte primește marginea solidă.
Setează dimensiunea — aceasta controlează valoarea border-width pe toate cele trei laturi și determină cât de mare apare triunghiul.
Alege o culoare pentru marginea vizibilă (solidă), care devine culoarea de umplere a triunghiului.
Copiază CSS-ul generat și aplică-l pe un element cu width: 0 și height: 0 — un <div> gol sau un pseudo-element precum ::before/::after funcționează bine ambele.

Exemplu

Intrare

Direcție: jos · Dimensiune: 60px · Culoare: #ea580c

Rezultat

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Pentru un triunghi care indică în jos, culoarea solidă merge pe border-top, în timp ce marginile din stânga și dreapta rămân transparente — partea opusă direcției în care indică triunghiul.

De ce contează lățimea și înălțimea zero

Trucul funcționează doar pentru că elementul nu are propria casetă de conținut — width: 0 și height: 0 înseamnă că întreaga formă vizibilă provine pur din marginile care se întâlnesc în punctul central. Dacă elementul are orice lățime sau înălțime, marginile nu se mai îngustează într-un punct curat și forma se strică. De aceea tehnica funcționează la fel de bine pe un <div> gol sau pe un pseudo-element ::before/::after cu content: "" — nu este nevoie de conținut real, doar de caseta de margine.

Documentația MDN despre proprietatea border CSS acoperă cum se combină border-width, border-style și border-color, inclusiv cum se întâlnesc marginile pe laturi adiacente la o diagonală (developer.mozilla.org/en-US/docs/Web/CSS/border) — faptul geometric pe care este construită întreaga tehnică.

Utilizări comune pentru triunghiuri CSS

Indicatoare de tooltip și balon de vorbire: un triunghi mic (6–10px) poziționat la marginea unei casete rotunjite, colorat pentru a se potrivi cu fundalul casetei.
Carete pentru meniuri derulante și select: un mic triunghi orientat în jos, lângă un buton sau element select, pentru a indica faptul că deschide un meniu.
Indicatori de acordeon/expandare: un triunghi orientat spre dreapta care se rotește pentru a indica în jos când o secțiune este extinsă.
Marcatori personalizați de listă: un mic triunghi orientat spre dreapta în locul marcatorului implicit al browserului, pentru un stil de listă mai distinctiv.
Colțuri simple de banner/panglică: un triunghi introdus în colțul unui card pentru a simula un efect de panglică pliată.

Combinarea cu alte instrumente CSS

Triunghiurile folosite ca indicatoare de tooltip au de obicei nevoie de o umbră proiectată corespunzătoare pentru a se potrivi vizual cu caseta de care sunt atașate — Generatorul Box Shadow produce acea umbră. Pentru forme de interfață care depășesc triunghiurile (chevron-uri, stele, hexagoane), clip-path este în general abordarea modernă mai bună, nu stratificarea altor trucuri de margine.

→ Generator Box Shadow · Generator Border Radius

Întrebări frecvente

De ce culoarea merge pe marginea opusă direcției în care indică triunghiul?

Imaginează-ți elementul ca un diamant format din patru segmente triunghiulare de margine care se întâlnesc la mijloc. Dacă culoarea solidă este pe marginea de sus, forma vizibilă ocupă jumătatea de sus — dar fiindcă elementul are dimensiune zero, acel triunghi 'jumătatea de sus' indică de fapt în jos, spre locul unde ar fi fost caseta de conținut inexistentă a elementului. Aceeași logică se aplică tuturor celor patru direcții.

Pot face un triunghi care nu este o formă isoscelă perfectă?

Da — acest instrument generează întotdeauna un triunghi simetric pentru simplitate, dar poți edita manual CSS-ul copiat ulterior. A face cele două lățimi de margine transparente inegale înclină triunghiul într-o parte; schimbarea independentă a lățimii marginii solide îi schimbă înălțimea fără a-i afecta lățimea bazei.

Această tehnică funcționează în toate browserele?

Da — trucul triunghiului bazat pe margini se bazează doar pe suportul de bază border-width, border-style și border-color, care există încă din primele implementări CSS. Este una dintre cele mai larg compatibile tehnici de formă din CSS pur disponibile.

Când ar trebui să folosesc clip-path în loc de trucul marginii?

Trucul marginii este ideal specific pentru triunghiuri simple, deoarece nu are nevoie de proprietăți suplimentare și funcționează peste tot. Pentru orice e mai complex — pentagoane, stele, săgeți cu o crestătură, sau tăieturi diagonale pe o casetă care încă trebuie să arate o imagine de fundal — clip-path este mai flexibil și mai ușor de gestionat, deși are un suport mai limitat pentru browserele mai vechi.

Pot pune text sau o iconiță în interiorul triunghiului?

Nu direct — fiindcă elementul triunghiului are lățime și înălțime zero, nu există o casetă de conținut care să țină ceva. Pentru a combina un triunghi cu text sau o iconiță, folosește-l ca un pseudo-element decorativ (::before/::after) pe un element părinte care îl poziționează absolut, apoi stilizează separat conținutul real al părintelui.