Uncategorized

Cara Membuat Segitiga Menggunakan HTML dan CSS

Posted by Andika Saputra on 4 Februari 2015
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.



selanjutnya kita tambahkan style cssnya.

.segitiga {
width:0;
height:0;
border-bottom:50px solid #999;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

maka hasilnya kaya dibawah ini.


Nah, kita coba untuk buat bentuk yang lain. Cobalah dengan style di bawah ini.

.segitiga {
width:0;
height:0;
border-left:50px solid #999;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}

hasilnya

.segitiga {
width:0;
height:0;
border-left:50px solid #999;
border-bottom:50px solid #999;
border-top:50px solid transparent;
border-right:50px solid transparent;
}

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.