Membuat Lingkaran Dengan CSS

Membuat Lingkaran Dengan CSS
Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS.
Memang mungkin terdengar sederhana, tapi pada tutorial CSS ini akan lebih menjelaskan pemahaman fungsi atau syntax CSS yang bisa kita manfaatkan untuk membuat lengkungan pada sudut element HTML.
Sehingga bisa membentuk lingkaran dengan menetapkan lengkungan penuh pada setiap sudut element HTML.
Di sarankan untuk teman-teman yang belum membaca tutorial dasar CSS di malasngoding.com agar membaca nya terlebih dulu. agar tutorial atau materi yang di sampaikan nyambung dan bisa di pahami dengan cepat.
Untuk membuat lingkaran dengan menggunakan CSS, caranya sangat mudah. silahkan teman-teman simak penjelasan berikut.
Membuat Lingkaran Dengan CSS
Kita akan langsung masuk ke contoh. di tutorial membuat lingkaran atau bulat dengan CSS ini, silahkan perhatikan syntax HTML dan CSS berikut.
Untuk membuat lingkaran, pertama kita akan membuat element <div>..</div>. serta memberikan class atau id pada element <div> tersebut. di sini saya membuat class ‘lingkaran1’ pada element <div>.
HTML
1 |
<div class="lingkaran1"></div> |
CSS
1 2 3 4 5 6 |
.lingkaran1{ width: 200px; height: 200px; background: #dac52c; border-radius: 100%; } |
Maka hasilnya akan menjadi seperti berikut.

Membuat Lingkaran Dengan CSS
Inti dari pembuatan lingkaran dengan CSS ada pada syntax border-radius. border-radius adalah perintah untuk mengatur radius lengkungan pada sebuah element HTML. pada syntax di atas kita memberi nilainya dengan 100%. sehingga lengkungan yang di hasilkan penuh (sehingga berbentuk bulat).
Coba ubah nilai nya menjadi 30%, atau terserah teman-teman. untuk melihat hasilnya. berikut hasil tampilan bentuk lingkaran yang jika nilai border-radius nya kita ganti dengan 30%.

membuat lengkungan dengan css
untuk mengubah ukuran lingkarannya teman-teman bisa langsung mengubah nilai ukuran height dan width nya.
1 2 |
width: 200px; height: 200px; |
Coding CSS Membuat Lingkaran
Berikut adalah full source code nya.
FULL SOURCE CODE
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 |
<!DOCTYPE html> <html> <head> <title>Membuat Lingkaran Dengan CSS - www.malasngoding.com</title> </head> <body> <style type="text/css"> body{ font-family: sans-serif; } .lingkaran1{ width: 200px; height: 200px; background: #dac52c; border-radius: 100%; } .lingkaran2{ width: 150px; height: 150px; background: #2ccada; border-radius: 100%; } </style> <h1>Membuat Lingkaran Dengan CSS <br/> www.malasngoding.com</h1> <br/> <div class="lingkaran1"></div> <br/> <div class="lingkaran2"></div> <br/> <br/> <br/> <a href="https://www.malasngoding.com">www.malasngoding.com</a> </body> </html> |
Hasil lengkapnya.

html css lingkaran
Oke sekian dulu tutorial Membuat Lingkaran Dengan CSS. semoga tutorial cara membuat lingkaran dengan mudah ini dapat bermanfaat. untuk demo dan link download source code nya bisa teman-teman lihat pada link di bawah.
Tutorial yang wajib di baca karena berhubungan dengan tutorial ini.
Tutorial Menarik Lainnya

Membuat Bentuk Segitiga Dengan CSS


Membuat Template Web Responsive Dengan HTML dan CSS


Cara Membuat Text Di Tengah Dengan HTML dan CSS

