Membuat Bentuk Segitiga Dengan CSS

Membuat Bentuk Segitiga Dengan CSS

Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di lazngoding.com. Beberapa waktu yang lalu ada beberapa teman yang membaca tutorial di lazyngoding.com yang menanyakan tentang tutorial cara membuat bentuk segitiga dengan menggunakan CSS.

Nah untuk melengkapi materi CSS di lazngoding.com, pada tutorial kali ini kita akan membahas cara membuat segitiga menggunakan CSS.

Silakan simak penjelasan berikut ini.

Membuat Bentuk Segitiga Dengan CSS

Sebelum masuk lebih jauh ke pembahasan tentang membuat segitiga menggunakan css ada baiknya sobat juga sudah membaca tentang tutorial berikut ini.

Baca juga:

  • Pengenalan dan Pemahaman tentang CSS
  • Bagaimana Menulis dan Menggunakan CSS

Oke langsung saja masuk ke pembahasannya.

Membuat Bentuk Segitiga Dengan CSS

Untuk membuat bentuk segi tiga, kita dapat menggunakan properti css "berbatasanCaranya kita bisa membuat garis atau border pada 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

Membuat Segitiga Dengan CSS - www.malasngoding.com

Pada script HTML di atas, saya mendemonstrasikannya dengan membuat sebuah elemen

..

yang kami beri kelas segitiga1.

Selanjutnya kita beri sentuhan CSS.

CSS

. segitiga1 {
tinggi: 0px;
lebar: 0px;
border-bottom: solid 120px blue;
border-left: solid 80px merah;
border-right: solid 80px yellow;
}

Pada skrip CSS di atas, pertama kita atur lebar dan tinggi menjadi 0px. sehingga tidak ada ruang kosong pada segitiga tersebut.

Pemberian berikutnya garis bawah (batas bawah) menurut jenis padat, ukuran garis 120px berdasarkan warna biru.

Garis kiri (pembatas kiri) menurut jenis padat, ukuran 80px berdasarkan warna merah. garis kanan (pembatas-kanan) menurut jenis padat, ukuran 80px berdasarkan warna kuning.

Maka hasilnya adalah sebagai berikut.

buat segitiga dengan css

buat segitiga dengan css

Tahap 2 – Memperkuat Segitiga

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

CSS

. segitiga1 {
tinggi: 0px;
lebar: 0px;
border-bottom: solid 120px blue;
border-left: solid 80px transparan;
border-right: solid 80px transparan;
}

Seperti yang terlihat pada skrip CSS di atas, sekarang kita ubah warna garis kanan dan kiri menjadi transparan.

Maka hasilnya adalah sebagai berikut.

bentuk segitiga css

bentuk segitiga css

Seperti yang terlihat pada gambar di atas. kami telah berhasil membuat bentuk segi tiga.

Make Up, Right, Down and Left Segitiga Dengan CSS

Untuk percobaan selanjutnya, untuk membuat bentuk segitiga yang mengarah ke kanan, ke bawah atau ke kiri kita tinggal bermain-main dengan garis atau border.

Seperti pada contoh berikut ini.




	Membuat Segitiga Dengan CSS - www.malasngoding.com



		


	

Membuat Segitiga Dengan CSS - www.malasngoding.com

Segi tiga
Segitiga ke kanan
Segitiga ke bawah
Segitiga ke kiri

Dan saat dieksekusi, hasilnya akan seperti berikut.

segitiga css

segitiga css

Pada poin ini telah selesai pembahasan tentang cara membuat segitiga dengan berbagai bentuk menggunakan HTML dan CSS.

Selanjutnya silahkan sobat bereksperimen dengan merubah warna atau ukurannya, agar sobat lebih paham dengan teknik membuat bentuk segitiga dengan CSS menggunakan border.

DEMO

UNDUH

Terima kasih ..

Istilah pencarian masuk:

  • template css menu pengkodean malas

Postingan Membuat Bentuk Segitiga Dengan CSS muncul pertama kali di Lazy Ngoding.