Cara Membuat Lingkaran dengan CSS

Pada kesempatan ini kami akan membahas tutorial cara membuat lingkaran dengan css menggunakan property border-radius sehingga memungkinkan area sisi sudut dari sebuah elemen menjadi lengkung atau round. Pada dasarnya element HTML sebuah bidang adalah terdiri dari property "width" dan "height" atau lebar dan tinggi sehingga akan membentuk bangun segi empat. Jika lebar dan tinggi memiliki value yang sama, ini akan membentuk sebuah bidang persegi dengan panjang semua sisi yang sama, dan akan menjadi sebuah lingkaran jika setiap sudut dibuat menjadi radius lengkungan senilai 100% dengan CSS. Seperti inilah teori dasar membuat lingkaran pada element HTML dengan style CSS, secara teori memang cukup mudah namun tetap menjadi wajib untuk dipelajari.

Tutorial cara membuat lingkaran dengan css ini masih sangat dasar dan sederhana, namun dari pemahaman inilah nantinya teman-teman dapat mengembangkannya menjadi lebih menarik dan full power style. Jika ada yang belum mengerti tentang pengertian CSS dapat teman-taman pelajari di artikel berikut ini apa itu css silahkan dibaca.

Berikut langkah - langkah tutorial cara membuat lingkaran dengan css menggunakan element HTML dan CSS3 lengkap beserta source code style css dan penjelasannya.

Membuat homepage dengan HTML
Membuat embedded style CSS untuk membentuk lingkaran.

Cara Membuat Lingkaran dengan CSS

Lingkaran CSS

membuat lingkaran dengan css

1. Membuat Homepage dengan HTML

Homepage adalah sebuah halaman index yang buat menggunakan kode HTML murni tanpa sentuhan CSS sedikitpun terlebih dulu sebagai pendahuluan. Meskipun nantinya kode css akan kita buat pada halaman HTML ini, hal ini dilakukan agar belajar css menjadi lebih mudah dipahami secara struktur dasarnya. Untuk membuat homepage tersebut yang sekaligus digunakan sebagai halaman index tutorial cara membuat lingkaran dengan css ini, silahakan tulis kode HTML berikut kemudian simpan pada folder tutorial.

Simpan sebagai index.html

<html>
	<head>
        <title>Membuat Lingkaran dengan HTML dan CSS</title>
	</head>
	<body>
        <h2>Membuat Lingkaran Dengan CSS</h2>
		<br />
		<div class="lingkaran"></div>
	</body>
</html>

Perhatikan baris kode ke-8 pada kode html di atas yaitu <div class="lingkaran"></div>, ini adalah element HTML dengan tag <div>...</div>. Untuk membuat lingkaran, diperlukan id atau class di dalam tag tersebut, dalam contoh ini adalah menggunakan class "lingkaran". Sehingga style CSS dengan "selector" class lingkaran akan terrepresentasikan pada setiap tag HTML dengan nama class yang sama, yaitu lingkaran.

2. Membuat Embedded Style CSS untuk Membentuk Lingkaran

Untuk membuat lingkaran di dalam css selector sangatlah mudah dan sederhana, hanya memerlukan beberapa property saja, silahkan ketik kode CSS di bawah ini. Letakan kode css tersebut pada file yang sama "embedded" pada file index.html di antara tag <head>...</head>.

<style type="text/css">
	.lingkaran{
		width: 160px;
		height: 160px;
		background: #FFA347;
		border-radius: 100%;
	}
</style>

Perhatikan kode di atas, adalah sebuah style CSS dimana selector .lingkaran di deklarasikan oleh {...} simbol kurung kurawal buka dan tutup, dengan beberapa properties dan value. Property width, height, background, dan border-radius harus memiliki value sebagaimana ditulis, jika value berbeda maka tidak akan menghasilkan lingkaran, misal jika width, dan height berbeda ini akan membentuk bidang oval. Atau jika misalnya property border-radius hanya memiliki value 50%, maka tidak akan membentuk lingakaran, hanya saja setiap sudat bidang akan menjadi lengkungan.

Dengan membuat kode css embedded di atas maka turorial cara membuat lingkaran dengan css ini sudah dapat dijalankan dan akan menampilkan sebuah lingkaran dengan warna mirip "orange". Jika akan membuat beberapa lingkaran atau bentuk bidang lengkung lainnya, cukup tambahkan nama class selector di dalam kode html dan css. Sebagaimana kode lengkap html dan css untuk membuat lingkaran di bawah ini, silahkan ketik pada teks editor, kemudian save dan jalankan pada web browser.

<html>
	<head>
        <title>Membuat Lingkaran dengan HTML dan CSS</title>
		<style type="text/css">
		.lingkaran{
			width: 140px;
			height: 140px;
			background: #FFA347;
			border-radius: 100%;
		}
		.lingkaran1{
			width: 90px;
			height: 90px;
			background: #E5E5E5;
			border-radius: 100%;
		}
		.oval{
			width: 80px;
			height: 120px;
			background: #000;
			border-radius: 100%;
		}
		</style>
	</head>
	<body style="width:40%;">
        <h2>Membuat Lingkaran Dengan CSS</h2>
		<center><div class="lingkaran"></div></center>
		<center><div class="lingkaran1"></div></center>
		<center><div class="oval"></div></center>
	</body>
</html>

Jika kode html dan css untuk membuat lingkaran di atas dijalankan maka akan membentuk beberapa bidang lengkungan seperti lingkaran dan oval, sebagaimana gambar di bawah ini.

membuat lingkaran dengan css

Inti dari tutorial cara membuat lingkaran dengan css dan bidang lengkung lain ada pada komponen css yang mengatur agar setiap sudut menjadi lengkungan adalah pada baris kode berikut ini.

border-radius: 100%;

Tutorial Cara Membuat Lingkaran dengan CSS

Sekian penjelasan sederhana dari kami tentang bagaimana cara membuat lingkaran dengan css menggunakan HTML dan CSS3 class selector sehingga setiap sisi sudut bidang memiliki border radius lengkung atau round. Untuk mendapatkan source code nya Anda dapat langsung saja copas dari sumber kode di atas, jika tidak dapat dicopas atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :