Membuat segitiga dengan css

Kali ini kita akan membuat segitiga dengan css. Membuat segitiga dengan css tidak sulit, hanya perlu sedikit pemahaman mengenai css border. Langsung saja, pertama kita akan membuat segitiga sama kaki berdiri.

html-nya.

<div class="atas"></div>

sedangkan css-nya.

.atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 30px solid tranparent;
  border-right: 30px solid tranparent;
}

Hasilnya:

Dengan div yang sama, kalau kita ingin membuat segitiga terbalik tinggal ganti css

border-bottom: 50px solid black;

Menjadi...

border-top: 50px solid black;

Dan hasilnya.

Intinya, kalau ingin membuat segitiga ke atas jangan kasih border-top, tapi kasih border-bottom. Sedangkan kalau ingin membuat segitiga ke bawah jangan kasih border-bottom, tapi border-top. Begitu juga kalau mau membuat segitiga yang mengarah ke samping kiri ataupun kanan.
Contoh :

<div class="kiri"></div>

<div class="kanan"></div>

css-nya

.kiri{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-right: 50px solid black;
}

.kanan{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-left: 50px solid black;
}

Hasilnya...

Bisa kita lihat baik width ataupun height-nya nol. Jadi, besar kecilnya ukuran segitiga ditentukan oleh seberapa besar atau tebal border yang digunakan.

Bagaimana kalau mau membuat segitiga yang arahnya ke sudut?

<div class="kiri-atas"></div>
<div class="kanan-atas"></div>

.kiri-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-left: 50px solid tranparent;
}

Yang sudut bawah

<div class="kiri-bawah"></div>
<div class="kanan-bawah"></div>

.kiri-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 50px solid tranparent;
}

Silahkan download source codenya di sini.