Belajar Koding HTML Bagian 19: Membuat Lingkaran Sederhana
.png)
Untuk
membuat elemen berbentuk lingkaran dalam HTML dan CSS, Anda dapat memanfaatkan
properti border-radius pada elemen HTML seperti <div>.
Berikut adalah langkah-langkahnya:
- Buat Elemen HTML: Tambahkan elemen <div> dengan kelas tertentu,
misalnya lingkaran.
- Terapkan Gaya CSS: Atur lebar dan tinggi elemen
agar sama, berikan warna latar belakang, dan tetapkan border-radius sebesar 50% untuk membentuk
lingkaran.
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 Lingkaran dengan CSS</title>
<style>
.lingkaran {
width: 200px;
height: 200px;
background-color: #1a4bee;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="lingkaran"></div>
</body>
</html>
Dalam kode
di atas:
- HTML: Elemen <div> dengan kelas lingkaran dibuat untuk merepresentasikan
lingkaran.
- CSS: Properti width dan height diatur sebesar 200 piksel
untuk membentuk elemen persegi. Properti background-color memberikan warna latar belakang, dan border-radius: 50% mengubah persegi tersebut
menjadi lingkaran dengan melengkungkan sudut-sudutnya.
Anda dapat
menyesuaikan ukuran dan warna sesuai kebutuhan dengan mengubah nilai pada
properti width, height, dan background-color.
Untuk referensi lebih lanjut, Anda dapat mengunjungi situs Malas Ngoding yang membahas pembuatan lingkaran dengan CSS:
REFERENSI
0 Response to "Belajar Koding HTML Bagian 19: Membuat Lingkaran Sederhana"
Post a Comment