Vodič: Kako ustvariti CSS trikotnik?

Na internetu je precej veliko že napisanega okoli CSS3 trikotnikov, a danes vam bom pokazal trikotnike v teoriji in tudi v praksi. Pogledali si bomo tudi nekaj praktičnih primorov uporabe CSS3 trikotnikov.

Tukaj si lahko ogledate kratko animacijo za lažje razumevanje kako dobimo osnovni trikotnik:

http://codepen.io/cungalunga/pen/OPREjv/

---

#1 - Trikotnik navzdol
Za trikotnik, ki je obrnjen proti dnu strani uporabimo naslednjo HTML kodo:

<div class="trikotnik-dol"></div>

Uporabimo pa naslednjo CSS3 kodo:

.trikotnik-dol {
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #468966;
}

Ko nastavimo našemu elementu .trikontik-dol border-top in mu damo ozadje barve #468966 se nam bo prikazal trikotnik, ki je obrnjen navzdol. Če si pogledamo trenutni primer na animaciji, se nam prikaže trikotnik ki je najbolj viden (zgornji):

---

#2 - Trikotnik navzgor
Za trikotnik, ki je obrnjen proti vrhu strani uporabimo naslednjo HTML kodo:

<div class="trikotnik-gor"></div>

Uporabimo pa naslednjo CSS3 kodo:

.trikotnik-gor {
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid #468966;
}

Ko nastavimo našemu elementu .trikontik-gor border-bottom in mu damo ozadje barve #468966 se nam bo prikazal trikotnik, ki je obrnjen navzgor. Če si pogledamo trenutni primer na animaciji, se nam prikaže trikotnik ki je najbolj viden (spodnji):

---

#3 - Trikotnik levo

Za trikotnik, ki je obrnjen levo uporabimo naslednjo HTML kodo:

<div class="trikotnik-levo"></div>

Uporabimo pa naslednjo CSS3 kodo:

.trikotnik-levo {
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #468966;
}

Ko nastavimo našemu elementu .trikontik-levo border-right in mu damo ozadje barve #468966 se nam bo prikazal trikotnik, ki je obrnjen levo. Če si pogledamo trenutni primer na animaciji, se nam prikaže trikotnik ki je najbolj viden (desni):

---

#4 - Trikotnik desno
Za trikotnik, ki je obrnjen desno uporabimo naslednjo HTML kodo:

<div class="trikotnik-desno"></div>

Uporabimo pa naslednjo CSS3 kodo:

.trikotnik-desno {
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #468966;
}

Ko nastavimo našemu elementu .trikontik-desno border-left in mu damo ozadje barve #468966 se nam bo prikazal trikotnik, ki je obrnjen desno. Če si pogledamo trenutni primer na animaciji, se nam prikaže trikotnik ki je najbolj viden (levi):

---

Primeri
Primer #1 - Namig (ang. Tooltip)
Primer #2 - Aplikacija


Vsi vodiči so objavljeni tudi na mojem blogu: blog.vidakovic.si