Membuat Bentuk Segitiga dengan CSS

Template Landing Page untuk Blogspot

OK.. sebelumnya saya akan memperlihatkan contoh-contoh penggunaan segitiga di beberapa website..

Twitter

Nah.. pasti anda mengria kalau itu adalah sebuah image/gambar.  Itu adalah segitiga yang dibuat dengan border. nahh bagaimana cara membuatnya…??

Dari berbagai tutorial yang saya baca, saya belum mengerti betul bagaimana membuat segitiga karena tutorialnya tidak menjelaskan darimana segitiga itu berasal.. hanay dikasih kode-kode CSSnya saja.

[related_posts]

Nah oleh karena itu saya melakukan eksperimen hehehehe…

OK.. pertama buat sebuah BOX dulu dengan ukuran 200 x 200 pixel, dengan border solid berukuran 100px, kalau bisa berikan warna yang berbeda-beda disetiap bordernya. contoh hasilnya akan seperti ini:

Kalau kesulitan membuatnya ini saya kasih kode CSSnya:

.coba{width: 200px;
height: 200px;
border-top: 100px solid #c0c0c0;
border-bottom: 100px solid green;
border-left: 100px solid #00ff00;
border-right: 100px solid #212121;}

Nahh.. bagaimana udah apa belumm…??? sekarang coba ganti ukuran BOXnya menjadi 0px “nol pixel” maka boxnya akan menjadi seperti ini:

Nahh… lihatt tuh segitiganya udah terbentuk.. ada empat segitiga.  Eh, itu persegi dodol?? .. Yaa itu memang persegit tapi lihat diagonalnya donk.. kalau dipecah bisa jadi segitiga.. mau bukti!!!

Baca Juga:  Menampilkan Post Content WordPress dengan 2 jenis layout berbeda

OK, sekarang coba hilangkan 3 segitiga pada persegi tersebut. Caranya ganti warna 3 segitiga yang mau dihilangkan menjadi transparent.

Jadi jika saya ingin membuat segitiga yang menghadap ke atas maka kodenya menjadi seperti ini:

.coba{width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;}

Lihat kode tersebut border-top, border-left dan border-right warnanya transparent. jadi yang akan tampak adalah border-bottom saja. udah mengerti kan maksud saya??

OK lahh kalau begitu sekian dulu tutorial dari saya.. semoga bermanfaat.. jika anda masih belum mengerti silahkan diskusikan di komentar yaa..!! hhehehe..

Selamat mencoba!

Tags

contoh bentuk segitiga,cara membuat segitiga di photoshop,membuat segitiga dengan css,membuat segitiga di photoshop,cara buat segitiga di photoshop,cara bungkus dodol segitiga,cara membuat foto berbentuk segitiga,membuat segitiga css,buat display segitiga dengan css,membuat bentuk web css,cara membungkus dodol berbentuk segitiga

Komentar

comments

grain storage hd porno izle turk porno