Cara Membuat Setengah Lingkaran dengan CSS

” di dalam tag body file HTML kita.

---

---

HTML

< div >< / div >

Sekarang, atur dimensi yang sesuai untuk div, seperti kita akan menetapkan ' lebar ” nilai properti sebagai “ 180px ' dan ' tinggi ”properti dengan nilai” 90px ”. Pada langkah selanjutnya, atur “ radius batas ' nilai properti ' 12rem 12rem 0 0 ”; di mana digit pertama 12rem akan memangkas sisi kiri atas div, 12rem kedua akan memangkas sisi kanan atas, digit ketiga dan keempat 0 akan memotong bagian bawah div. Terakhir, untuk memberi warna pada lingkaran, gunakan tombol “ warna latar belakang ”properti dengan nilai” ungu ”.

CSS

div {
lebar : 180px ;
tinggi : 90px ;
radius batas : 12rem 12rem 0 0 ;
warna latar belakang : ungu ;
}

Simpan file HTML dengan kode yang disebutkan dan buka di browser Anda:

Seperti yang Anda lihat, kami telah berhasil membuat setengah lingkaran dengan properti CSS border-radius.

Contoh 2: Buat Setengah Lingkaran dari Bawah dengan CSS

Untuk pembentukan setengah lingkaran dari bawah, kita akan mengatur nilai properti border-radius sebagai “ 0 0 12rem 12rem ”, di mana dua nilai pertama mewakili radius batas kiri atas dan kanan atas. Kami telah mengaturnya ke 0 untuk membuat bagian atas div menghilang sepenuhnya. Untuk bagian bawah, kami hanya memangkas sedikit sisi kiri bawah dan kanan bawah dengan mengatur nilainya menjadi 12rem.

CSS

div {
lebar : 180px ;
tinggi : 90px ;
radius batas : 0 0 12rem 12rem ;
warna latar belakang : ungu ;
}

Keluaran

Contoh 3: Buat Setengah Lingkaran dari Kanan dengan CSS

Untuk membuat setengah lingkaran CSS ke kanan, pertama, sesuaikan tinggi dan lebar wadah karena diperlukan untuk mendapatkan bentuk lingkaran yang tepat. Mengatur ' lebar ' sebagai ' 90px ' dan ' tinggi ' sebagai ' 180px ' kali ini. Sekali lagi, gunakan properti border-radius dengan nilai “ 0 12rem 12rem 0 ”, dimana nilai pertama 0 untuk sisi kiri atas, nilai terakhir 0 untuk sisi kiri bawah, dan nilai kedua dan ketiga ditambahkan untuk memangkas sisi kanan atas dan kanan bawah. Menerapkan nilai-nilai ini akan membentuk setengah lingkaran dari kanan.

CSS

div {
lebar : 90px ;
tinggi : 180px ;
radius batas : 0 12rem 12rem 0 ;
warna latar belakang : ungu ;
}

Keluaran

Contoh 4: Buat Setengah Lingkaran dari Kiri dengan CSS

Kali ini, tentukan properti border-radius di sepanjang nilai “ 12rem 0 0 12rem ”; nilai pertama dan terakhir 12rem akan memangkas sisi kiri atas dan kiri bawah div, menyetel nilai kedua dan ketiga ke 0 akan memperjelas sisi kanan atas dan kanan bawah lingkaran. Akhirnya, setengah lingkaran sisi kiri kita akan dibuat.

CSS

div {
lebar : 90px ;
tinggi : 180px ;
radius batas : 12rem 0 0 12 rem ;
warna latar belakang : ungu ;
}

Keluaran

Kami telah menawarkan metode yang berbeda untuk membuat setengah lingkaran dengan CSS.

Kesimpulan

Untuk membuat setengah lingkaran, kita cukup memanfaatkan CSS “ radius batas ' Properti. Setengah lingkaran dapat dibuat dari sisi ke sisi, seperti ke kiri, kanan, atas dan bawah. Di properti border-radius, nilai awal adalah untuk kiri atas, yang kedua untuk kanan atas, yang ketiga untuk kanan bawah, dan nilai keempat untuk sisi kiri bawah. Artikel ini telah menjelaskan cara membuat setengah lingkaran dengan CSS.