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. Pembentukan Triangle (Segitiga)
Bisa dilihat pada demo div di bawah ini:
Bisa dilihat pada demo div di bawah ini:
Div di atas terbentuk dengan css style di bawah 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 diilustrasikan dengan gambar di bawah ini:
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:
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}
Sekian artikel saya kali ini, semoga artikel ini bermanfaat untuk kalian. Terima kasih sudah berkunjung dan sampai jumpa di artikel saya selanjutnya.
1 comments
nice ! :)
Faisal Tekhnologi
Harap berkomentar dengan menggunakan kata-kata yang sopan, dan tidak memicu keributan. Terima kasih
EmoticonEmoticon