Membuat Bentuk Segitiga Dengan CSS


Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang meminta untuk dibuatkan tutorial tentang cara membuat bentuk segita menggunakan CSS.

Jadi untuk melengkapi materi CSS di malasngoding.com, pada tutorial kali ini kita akan membahas tentang cara membuat segitiga dengan menggunakan CSS.

Silahkan simak penjelasan berikut.

Membuat Bentuk Segitiga Dengan CSS

Sebelum lebih jauh ke pembahasan tentang membuat segitiga menggunakan CSS ini, ada baiknya teman-teman juga sudah membaca tentang tutorial berkut.

Baca Juga :

Oke, langsung saja kita masuk ke pembahasan.

Membuat Bentuk Segitiga Dengan CSS

Untuk membuat bentuk segitiga, kita bisa menggunakan property css “border“. caranya kita bisa membuat garis atau border pada bagian-bagian tertentu untuk membentuk pola dari segitiga.

Saya membagi proses pembuatan segitiga CSS ini menjadi 2 tahap.

Tahap 1- Membuat Pola Segitiga

Perhatikan contoh berikut.

HTML

Pada script HTML di atas, saya contohkan dengan membuat sebuah element <div> .. </div> yang kita beri class segitiga1.

Selanjutnya kita berikan sentuhan CSS.

CSS

Pada script CSS di atas, kita set dulu ukuran lebar dan tinggi nya ke 0px. agar tidak ada space kosong pada segitiha.

Selanjutnya beri garis bawah (border-bottom) dengan jenis solid, ukuran garis 120px dengan warna blue.

Garis kiri (border-left) dengan jenis solid, ukuran 80px dengan warna red. garis kanan (border-right) dengan jenis solid, ukuran 80px dengan warna yellow.

Maka Hasilnya akan seperti berikut.

membuat segitiga dengan css

membuat segitiga dengan css

Tahap 2 – Mempertegas Segitiga

Langkah selanjutnya, ubah warna dari border-left dan border-right menjadi transparent agar warnanya menjadi transparan.

CSS

Seperti yang terlihat pada script CSS di atas, sekarang warna garis kanan dan garis kiri kita ubah warna nya menjadi transparent.

Maka hasilnya seperti berikut.

bentuk segitiga css

bentuk segitiga css

Seperti yang terlihat pada gambar di atas. kita telah berhasil membuat bentuk segitiga.

Membuat Segitiga Ke Atas, Kanan, Bawah dan Kiri Dengan CSS

Untuk percobaan selanjutnya, untuk membuat bentuk segitiga yang mengarah ke kanan, ke bawah ataupun ke kiri, kita tinggal memainkan garis atau border.

Seperti pada contoh berikut.

Dan pada saat dijalankan maka hasilnya akan seperti berikut.

segitiga css

segitiga css

Sampai di sini selesai sudah pembahasan tentang cara membuat segitiga dengan berbagai macam bentuk dengan menggunakan HTML dan CSS.

Selanjutnya silahkan teman-teman melakukan experimen dengan mengubah warna atau ukuran, agar lebih familiar dengan teknik pembuatan bentuk segitiga dengan CSS menggunakan border.

DEMO

DOWNLOAD

Terima kasih ..

Incoming search terms:

  • template css menu malas ngoding
  • css segitiga
  • belajar css malascoding part11
  • belajar membuat bentuk css



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

Membuat Lingkaran Dengan CSS

Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ...
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS
cara disable resize form textarea dengan css
Diskusi
Tidak Ada Komentar