Cara Membuat CSS Border Triangle

Hay sobat XC-Blog ! sebelumnya XC-Blog share " XC Blog dapet award dari amos xp dan iffat blogger"
thanks ya :), nah sekarang XC-Blog mau share "Cara Membuat CSS Border Triangle" ( Segitiga ) nah kalian pasti penasaran kan ? oke lah kalo begitu langsung saja ke pembahasannya :)
CSS ini paling saya sering pakai dan saya suka gabungkan dengan elemen :before dan :after cuma saya suka kelupaan kode-kodenya, oleh karena itu saya postkan sebagai dokumentasi di blog ini biar tidak bolak-balik search tentang CSS Border Triangle. referensi css ini saya baca dari hompimpaalaihumgambreng.

1. Pmbentukan Triangle(Segitiga)
bisa dilihat pada demo Div dibawah ini:

Div diatas terbentuk dengan css style dibawah ini:

.coba {
  width:0px;
  height:0px;
  border-width:150px;
  border-style:solid;
  border-color: red green blue yellow;
}

dengan kode html :  
<div class="coba">
</div>
Untuk ukuran dari bordernya bisa kamu atur pada kode css border-width, jika belum mengerti pembentukan tampilan dari css triangle ini bisa di ilustrasikan dengan gambar dibawah ini:
CSSTriangle

2. Menghilangkan sebagian atau semua Border color 
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :

dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :

.coba2 {
  width:0px;
  height:0px;
  border-width:50px;
  border-style:solid;
  border-color: black black black transparent
}

Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.
.coba3 {  width:0px;  height:0px;  border-width:50px;  border-style:solid;  border-color: #fc0 #fc0 transparent #fc0}

oke cukup sampai sini saja
semoga artikel ini bermanfaat untuk anda, terimakasih :)
Source

Postingan terkait:

35 Tanggapan untuk "Cara Membuat CSS Border Triangle"

  1. Wah Makasih Tutorialnya ..

    Visit Http://zona-dikhy.blogspot.com

    ReplyDelete
  2. wih bagus juga nih sob artikelnya hehehe..
    coba dulu ah :)
    mudah"an bisa :)

    ReplyDelete
    Replies
    1. Aminn hehhehe, thx sob dah berkunjung....

      Delete
  3. nice post..
    izin coba dulu ya...
    mungkin bagus untuk blog gw nih.. XD

    ReplyDelete
    Replies
    1. silahkan bro hehehe :)
      thanks dah berkunjung

      Delete
  4. pacar ku jago bikin artikel xD
    commentback ya beibh (˘⌣˘)ε˘`)
    www.mickeymaru.com

    ReplyDelete
    Replies
    1. halah kampret, maho :3
      thx ya kk dah kesini :p hahahhaa

      Delete
  5. cara nya panjang :v mending pake css rotate aja simple gk makan page size :P
    Visit Back XkresssX Technology

    ReplyDelete
    Replies
    1. wew ada kk thx ya kaka dah kesini :p
      hahhaha (y)

      Delete
    2. Wkwkwkwk bener kata bang rendy :v lebih mudah :P

      Delete
  6. Nice site gan... sukses

    Comback and Follback http://googreenkaltim.blogspot.com/2013/01/lobang-tambang-menjadi-ladang-uang.html

    ReplyDelete
  7. Replies
    1. ok sama".
      thanks juga dah berkunjung kemari hehehehehe

      Delete
  8. Terima kasih infonya ...
    keren CSSnya (y)

    ReplyDelete
  9. Bermanfaat sekali infonya ^_^
    http://cyber-x-h4cker.blogspot.com/

    ReplyDelete
  10. Hahaha, izin copas artikel beibh ♥▽♥
    Commentback Mickeymaru

    ReplyDelete
    Replies
    1. sip beibh, tapi jgn lupa ya beibh, sertakansumber :)
      Muach :P

      Delete
  11. Ijin Sedot Ya :D

    Visit Back : http://xkpreesskx-sur4b4y4.blogspot.com/

    ReplyDelete
    Replies
    1. azz sedot" mang kau kata download :D
      tpi gpp hehehe thx ya dh kemari :)

      Delete
  12. Nice Post Sob
    ijin coba dlu moga - moga bisa

    http://dedisinaga123.blogspot.com/

    ReplyDelete
  13. keren bro .... taipii ...
    numpang tanya sedikit nih bro jadi kalo border nya yang di jadiin segitiga , tepi2nya bisa di kasi border lagi gx yahh ,,, ? ? ?

    ane newbie soal nya
    hehehe .....

    ReplyDelete
  14. kalau memasang tools CSS triangle di http://sembadakost.blogspot.com bagaimana yah?

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.