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
|
1 2 3 |
<h2>Membuat Segitiga Dengan CSS - www.malasngoding.com</h2> <div class="segitiga1"></div> |
Pada script HTML di atas, saya contohkan dengan membuat sebuah element <div> .. </div> yang kita beri class segitiga1.
Selanjutnya kita berikan sentuhan CSS.
CSS
|
1 2 3 4 5 6 7 |
.segitiga1{ height:0px; width:0px; border-bottom:solid 120px blue; border-left:solid 80px red; border-right:solid 80px yellow; } |
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
Tahap 2 – Mempertegas Segitiga
Langkah selanjutnya, ubah warna dari border-left dan border-right menjadi transparent agar warnanya menjadi transparan.
CSS
|
1 2 3 4 5 6 7 |
.segitiga1{ height:0px; width:0px; border-bottom:solid 120px blue; border-left:solid 80px transparent; border-right:solid 80px transparent; } |
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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html> <head> <title>Membuat Segitiga Dengan CSS - www.malasngoding.com</title> </head> <body> <style type="text/css"> .segitiga1{ height:0px; width:0px; border-bottom:solid 120px blue; border-left:solid 80px transparent; border-right:solid 80px transparent; margin-bottom: 20px; } .segitiga2{ height:0px; width:0px; border-left:solid 120px red; border-top:solid 80px transparent; border-bottom:solid 80px transparent; margin-bottom: 20px; } .segitiga3{ height:0px; width:0px; border-top:solid 120px orange; border-left:solid 80px transparent; border-right:solid 80px transparent; margin-bottom: 20px; } .segitiga4{ height:0px; width:0px; border-right:solid 120px green; border-top:solid 80px transparent; border-bottom:solid 80px transparent; } </style> <h2>Membuat Segitiga Dengan CSS - www.malasngoding.com</h2> <!-- segitiga ke atas --> Segitiga <div class="segitiga1"></div> <!-- segitiga ke kanan --> Segitiga ke kanan <div class="segitiga2"></div> <!-- segitiga ke bawah --> Segitiga ke bawah <div class="segitiga3"></div> <!-- segitiga ke kiri --> Segitiga ke kiri <div class="segitiga4"></div> </body> </html> |
Dan pada saat dijalankan maka hasilnya akan seperti berikut.
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.
Terima kasih ..
Tutorial Menarik Lainnya
Membuat Lingkaran Dengan CSS
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS
Cara Disable Resize Form Textarea Dengan CSS
