Membuat Bentuk Segitiga dengan CSS

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:

Baca Juga:  Adobe Edge Web Font : Layanan Web-Font Dari Adobe

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.

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!

Komentar

comments

grain storage steel silo grain bins