CSS / Posted 2 years ago / 7 Komentar
membuat-bentuk-segitiga-dengan-css

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.

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.

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,membuat segitiga dengan css,cara membuat foto berbentuk segitiga,membuat segitiga css,cara membuat segitiga di photoshop,membuat segitiga di photoshop,cara bikin web design,cara membuat segitiga pada photoshop,membuAT segitiga dengan css3,cara membuat segitiga dengan css3,membuat bentuk dengan css,cara membuat segitiga dengan css,cara buat sigitiga dengan photoshop,cara membuat bentuk segitiga di photoshop,codeigniter twitter bootstrap,css segitiga,segitiga css,contoh bentuk segi tiga,gambar dari bentuk segitiga,Gambar berbentuk segitiga Tags: , , ,
cToko Toko Online

7 Comments

  1. Yudhi Satrio
    Posted April 28, 2012 at 11:03 pm | Permalink

    Wow, nice trick. tapi sebenernya dari contoh2 yang diambil itu semuanya pakai css sprites. mungkin kasih contoh riilnya, jangan cuman bikin segitiganya aja yang nongol

  2. Posted April 29, 2012 at 4:19 pm | Permalink

    Ada juga di CSS Tricks:
    http://css-tricks.com/examples/ShapesOfCSS/

    Di demo tersebut dicontohkan beberapa jenis segitiga dan beberapa contoh bentuk lain dengan menggunakan CSS murni :)

  3. Posted April 29, 2012 at 5:45 pm | Permalink

    Pengen belajar blogazine dari agan nih. makasih tutornya. Baca wawancaranya dengan Mohammad Jeprie menarik dan bagus pak. kapan2 bikin wawancara lagi gan.

    Salam kenal gan. thanks udah share.

  4. Posted April 30, 2012 at 1:49 pm | Permalink

    Generator Css, hanya perlu konfigurasi, copy dan paste di : http://harrysuherman.com/2012/04/30/membuat-shape-mudah-dengan-css3/

  5. Posted June 16, 2012 at 2:18 pm | Permalink

    inidia yang saya cari lumayan buat mempercantik design website :D

  6. Posted August 3, 2012 at 11:10 pm | Permalink

    Manteb coi tutoriale..ijin baca

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign