Membuat Segitiga Menggunakan CSS

Dalam membuat sebuah desain blog kadang kala kita memerlukan bantuan bitmap seperti jpeg dan png, tapi jika terlalu banyak menambahkan elemen bitmap sudah pasti beban blog kita akan bertambah berat. Untuk menghindari hal semacam ini sebaiknya kamu memanfaatkan CSS sebagai teknik dalam membuat atau menambah suatu elemen dalam blog misalnya ketika membuat sebuah tombol atau background.
Kali ini saya akan memberikan sebuah contoh sekaligus code CSS yang bisa kamu gunakan untuk membentuk sebuah bidang segitiga.

/* segitiga menghadap atas */

.sgtg-atas {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;  /* sisi kiri */
  border-right:5px solid transparent; /* sisi kanan */
  border-bottom:5px solid #2f2f2f; /* bawah, warna segitiga kamu */
  font-size:0px;
  line-height:0px;
}

/* segitiga menghadap bawah */
.sgtg-bawah {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

/* segitiga menghadap kiri */
.sgtg-kiri {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* sisi kiri */
  border-top:5px solid transparent; /* sisi kanan */
  border-right:5px solid #2f2f2f; /* bawah, warna segitiga kamu */
  font-size:0px;
  line-height:0px;
}

/* segitiga menghadap kanan */
.sgtg-kanan {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* sisi kiri */
  border-top:5px solid transparent; /* sisi kanan */
  border-left:5px solid #2f2f2f; /* bawah, warna segitiga kamu */
  font-size:0px;
  line-height:0px;
}

note : # 2f2f2f adalah warna dari segitiga itu, kamu bisa merubahnya sesuai selera kamu, begitu juga dengan ketiga bordernya ukurannya bisa kamu sesuaikan sesuai kebutuhan.


Blogging Is Sharing...

Description: Membuat Segitiga Menggunakan CSS Rating: 4.5