Belajar Koding HTML Bagian 20: Membuat Segitiga Sederhana
.png)
Untuk
membuat bentuk segitiga menggunakan HTML dan CSS, Anda dapat memanfaatkan
properti border pada elemen dengan lebar dan tinggi
nol. Dengan mengatur warna dan ukuran pada sisi-sisi border tertentu, Anda
dapat membentuk segitiga yang mengarah ke berbagai arah. Berikut adalah
langkah-langkah dan contoh kode untuk membuat segitiga yang mengarah ke atas:
- Buat
Elemen HTML:
Tambahkan elemen <div> dengan kelas tertentu,
misalnya segitiga-atas.
- Terapkan
Gaya CSS:
- Atur
width dan height elemen menjadi 0
- Tentukan
ukuran dan warna pada sisi-sisi border untuk membentuk segitiga.
Berikut
contoh kode lengkapnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Membuat
Segitiga dengan CSS</title>
<style>
.segitiga-atas
{
width: 0;
height: 0;
border-left:
50px solid transparent;
border-right:
50px solid transparent;
border-bottom:
100px solid #3498db;
}
</style>
</head>
<body>
<div class="segitiga-atas"></div>
</body>
</html>
 |
| Tampilan Hasil (Output) Membuat Segitiga |
Penjelasan
kode di atas:
- HTML: Elemen <div> dengan kelas segitiga-atas dibuat untuk merepresentasikan
segitiga yang mengarah ke atas.
- CSS:
- width dan height diatur ke 0 untuk membuat elemen tanpa
dimensi.
- border-left dan border-right masing-masing diberi ukuran 50px dengan warna transparent untuk membentuk sisi miring
segitiga.
- border-bottom diberi ukuran 100px dengan warna #3498db (biru) untuk membentuk dasar
segitiga.
Untuk
membuat segitiga yang mengarah ke arah lain, Anda dapat menyesuaikan properti border
sebagai berikut:
- Segitiga
Mengarah ke Bawah:
.segitiga-bawah {
width: 0;
height: 0;
border-left: 50px
solid transparent;
border-right: 50px
solid transparent;
border-top: 100px
solid #e74c3c;
}
- Segitiga
Mengarah ke Kiri:
.segitiga-kiri {
width: 0;
height: 0;
border-top: 50px
solid transparent;
border-bottom: 50px
solid transparent;
border-right: 100px
solid #2ecc71;
}
- Segitiga
Mengarah ke Kanan:
.segitiga-kanan {
width: 0;
height: 0;
border-top: 50px
solid transparent;
border-bottom: 50px
solid transparent;
border-left: 100px
solid #f39c12;
}
Dengan
menyesuaikan ukuran dan warna pada properti border, Anda dapat membuat berbagai bentuk
segitiga sesuai kebutuhan desain Anda.
Untuk
referensi lebih lanjut, Anda dapat mengunjungi situs Malas Ngoding yang
membahas pembuatan bentuk segitiga dengan CSS.
REFERENSI
Sekolah coding Indonesia - Sko.dev
0 Response to "Belajar Koding HTML Bagian 20: Membuat Segitiga Sederhana"
Post a Comment