Kali ini kita akan membahas bagaimana cara membuat lingkaran dengan menggunakan CSS.
Membuat Lingkaran dengan CSS
Buat element <div>…</div> dan buat class “lingkaran” nama Class ini yang akan digunakan untuk pada css.
CSS
.lingkaran {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}HTML
<div class="lingkaran"></div>HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
.lingkaran {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="lingkaran"></div>
</body>
</html>Maka hasilnya :
Berikutnya saya ingin memberikan garis pada bagian luar lingkaran dengan CSS. Kalian hanya perlu menambahkan 1 perintah css.
CSS
border: 2px solid black;Maka hasilnya:
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat border dan shadows pada lingkaran menggunakan CSS.
Leave a Reply