Generator triunghi CSS

Exemple de triunghiuri CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Săgeată în sus Trei laturi de border: două transparente și una colorată.

.element {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #2563eb;
}

Săgeată mică în jos Indicatorul de lângă un meniu care se deschide.

.element {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #0f172a;
}

Buton de play Triunghi spre dreapta, ca pe butoanele video.

.element {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 70px solid #dc2626;
}

Colț decorativ Doar două laturi: un triunghi dreptunghic în colțul unui card.

.element {
  width: 0;
  height: 0;
  border-top: 80px solid #f97316;
  border-left: 80px solid transparent;
}

Colț de jos Varianta în colțul stânga jos.

.element {
  width: 0;
  height: 0;
  border-bottom: 60px solid #16a34a;
  border-right: 90px solid transparent;
}

Cu clip-path Același triunghi decupat dintr-un element normal; poate avea și gradient.

.element {
  width: 100px;
  height: 80px;
  background: #7c3aed;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Săgeata unui tooltip Triunghiul pus cu ::after sub o bulă de text.

.tooltip {
  position: relative;
  padding: 8px 12px;
  color: #ffffff;
  background: #0f172a;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0f172a;
}

Cum folosești generatorul de triunghi

Alege direcția: sus, jos, stânga, dreapta sau unul dintre cele patru colțuri.
Setează lățimea, înălțimea și culoarea.
Alege metoda: cu borduri sau cu clip-path, apoi copiază codul.

Trucul cu borduri

Un element cu lățime și înălțime 0 și borduri groase se desenează ca patru triunghiuri care se întâlnesc în centru. Dacă faci trei borduri transparente, rămâne vizibil doar unul. Pentru un triunghi care arată în sus, colorezi bordura de jos:

.triunghi-sus {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #2563eb;
}

Lățimea triunghiului este suma bordurilor din stânga și din dreapta, iar înălțimea este bordura colorată. Pentru un triunghi în colț ajung două borduri: una colorată și una transparentă.

Varianta cu clip-path

clip-path: polygon() decupează un element obișnuit după colțurile date în procente. Codul e mai ușor de citit, elementul poate avea fundal cu gradient sau imagine, iar dimensiunea se dă direct prin width și height.

.triunghi-sus {
  width: 100px;
  height: 80px;
  background: #2563eb;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Pentru alte forme decupate folosește generatorul de clip-path.

Săgeata unui tooltip

Ca să nu adaugi elemente în HTML, desenează triunghiul cu pseudo-elementul ::after și poziționează-l absolut față de tooltip:

.tooltip {
  position: relative;
  background: #1e293b;
  color: #fff;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #1e293b;
}

Întrebări frecvente

Care metodă e mai bună?

Ambele merg în toate browserele moderne. Bordurile sunt potrivite pentru săgeți mici de o singură culoare; clip-path e mai potrivit când triunghiul are gradient, imagine sau dimensiuni în procente.

Pot pune umbră pe triunghi?

box-shadow urmează dreptunghiul elementului, nu triunghiul. Folosește filter: drop-shadow(), pus pe triunghi sau pe părintele lui.