Senin, 02 Oktober 2017

Cara Membuat Garis Vertikal Dengan HTML dan CSS


Saya pernah membuat tutorial membuat garis horizontal/mendatar pada html. Nggak afdol kan kalau nggak share tutorial membuat garis vertikal/menurun. Untuk tutorial kali ini kita dapat menggunakan css sebagai alat bantu untuk membuat garisnya. Di sini saya contohkan menggunakan tag div dengan menambahkan attribute style untuk mengisi css-nya (css internal).

Contoh kodenya :

Di kode tersebut terlihat saya membuat width atau panjangnya adalah 0 agar tidak ada tempat kosong dan height atau tingginya 200px.
Di situ juga saya beri border setebal 1px berwarna hitam dan bersifat solid, kalau value solid pada properti border dihilangkan maka garis vertikal tidak akan terlihat, kalau value solid diganti dengan dotted, dashed, atau double, maka garis vertikal yang ditampilkan juga akan sesuai sifat border tersebut.

Contoh hasil :


Mungkin itu saja yang dapat saya bagikan kali ini. Semoga bermanfaat, terima kasih.

2 komentar


EmoticonEmoticon