Membuat Segitiga Dengan CSS Border

Hallo sobat CLV..

Kali Ini Saya akan  memposting tentang cara membuat segitiga di blog dengan CSS Border..
Setelah sekian lama saya mencari tahu cara membuat bentuk segitiga di blog akhirnya saya menemukan caranya. Berikut Caranya :

Awalnya saya iseng-iseng bikin border besar lalu lebar dan tingginya dijadikan 0 pixel seperti di bawah ini

#CLVsegi3{border-top:50px solid #FF0000;border-right:55px solid #FF8401;border-left:55px solid #fff;border-bottom:50px solid #01FF27;position: absolute;float:left; margin-top:280px; margin-left:1150px;width:0px; height:0px;}

Dan penampakannya menjadi seperti gambar dibawah ini :

Kalau begitu anda tinggal merubah warna border yang tidak terpakai dengan warna transparant, menjadi seperti ini

#CLVsegi3{border-top:50px solid transparent;border-right:55px solid transparent;border-left:55px solid transparent;border-bottom:50px solid #01FF27;position: absolute;float:left; margin-top:280px; margin-left:1150px;width:0px; height:0px;}

 Dan penampakannya menjadi seperti gambar di bawah ini..

Jadi deh segitiganya..Mudah bukan ?

Semoga bermanfaat !!

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn