Cara Membuat Segitiga Menggunaan HTML DAN CSS

0 comments


CARA MEMBUAT SEGITIGA MENGGUNAKAN HTML DAN CSS


membuat segitiga menggunakan html dan css
Hai, apa kabar pembaca? Lama nggak nulis lagi di blog ini. Oke, langsung aja seperti judul di atas, kali ini saya akan memberikan sedikit tip atau tutorial membuat bentuk segitiga dengan menggunakan HTML dan CSS. Hampir sama dengan postingan sebelumnya yang membahas tentang membuat lingkaran dengan html dan css, di sini kita buat segitiga menggunakan HTML dan CSS karena akan menjadikan web kita tidak terlalu oversize karena file gambar. Langkah pembuatannya juga tidak terlalu sulit, kita cukup memanfaatkan fitur border yang ada di CSS.

Langsung saja, untuk membuat segitiga dengan HTML dan CSS, pertama kita buat dulu
sebuah elemen div dengan class segitiga.
view plainprint?
  1. <div class="segitiga">  
  2. </div>  
selanjutnya kita tambahkan style cssnya.
view plainprint?
  1. .segitiga {  
  2.      width:0;  
  3.      height:0;  
  4.      border-bottom:50px solid #999;  
  5.      border-left:50px solid transparent;  
  6.      border-right:50px solid transparent;  
  7. }  
maka hasilnya kaya dibawah ini.



Nah, kita coba untuk buat bentuk yang lain. Cobalah dengan style di bawah ini.
view plainprint?
  1. .segitiga {  
  2.      width:0;  
  3.      height:0;  
  4.      border-left:50px solid #999;  
  5.      border-top:50px solid transparent;  
  6.      border-bottom:50px solid transparent;  
  7. }  
hasilnya
view plainprint?
  1. .segitiga {  
  2.      width:0;  
  3.      height:0;  
  4.      border-left:50px solid #999;  
  5.      border-bottom:50px solid #999;  
  6.      border-top:50px solid transparent;  
  7.      border-right:50px solid transparent;  
  8. }  
hasilnya

Nah, kira-kira begitulah hasilnya ketika kita menggunakan HTML dan CSS untuk membuat sebuah segitiga. Temen-temen bisa coba menganalisa kemudian mengembangkan dan mencoba-coba sendiri dalam membuat segitiga dengan html dan css. Saya kira cukup sekian dulu tulisan saya tentang Cara Membuat Segitiga Menggunakan HTML dan CSS kali ini, semoga dapat membantu.
Share on :
.