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!!!

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

Baca Juga:  Bagaimana Menghubungkan Twitter ke Status Facebook

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,cara bungkus dodol segitiga,membuat segitiga di photoshop,cara buat segitiga di photoshop,cara membuat foto berbentuk segitiga,membuat segitiga css,cara membungkus dodol tiga segi,buat display segitiga dengan css,membuat border segitiga dengan css,cara membungkus do,cara menulis css bentuk segitiga,Cara membuat segitiga di website,dodol segitiga cara,membuat bentuk web css,cara membuat segitiga dengan css,bungkus dodol jadi segitiga,cara membungkus dodol berbentuk segitiga

Komentar

comments

grain storage kocaeli escort