Cara Membuat Separuh Bulatan dengan CSS

” elemen di dalam teg badan fail HTML kami.

---

---

HTML

< div >< / div >

Sekarang, tetapkan dimensi yang sesuai untuk div, seperti kami akan menetapkan ' lebar ” nilai harta sebagai “ 180px ” dan “ ketinggian 'harta dengan nilai' 90px ”. Dalam langkah seterusnya, tetapkan ' jejari sempadan 'nilai harta' 12rem 12rem 0 0 ”; di mana digit pertama 12rem akan memangkas bahagian kiri atas div, 12rem kedua akan memangkas bahagian atas sebelah kanan, digit ketiga dan keempat 0 akan memotong bahagian bawah semua div. Akhir sekali, untuk memberi warna pada bulatan, gunakan ' warna latar belakang ” harta dengan nilai “ ungu ”.

CSS

div {
lebar : 180px ;
ketinggian : 90px ;
jejari sempadan : 12rem 12rem 0 0 ;
warna latar belakang : ungu ;
}

Simpan fail HTML dengan kod yang disebutkan dan bukanya dalam penyemak imbas anda:

Seperti yang anda lihat, kami telah berjaya mencipta separuh bulatan dengan sifat jejari sempadan CSS.

Contoh 2: Cipta Separuh Bulatan dari Bawah dengan CSS

Untuk pembentukan separuh bulatan dari bawah, kami akan menetapkan nilai sifat jejari sempadan sebagai “ 0 0 12rem 12rem ”, di mana dua nilai pertama mewakili jejari sempadan sebelah kiri atas dan sebelah kanan atas. Kami telah menetapkannya kepada 0 untuk membuat bahagian atas div hilang sepenuhnya. Untuk bahagian bawah, kami hanya memangkas sedikit bahagian bawah kiri dan bahagian bawah kanan dengan menetapkan nilai kepada 12rem.

CSS

div {
lebar : 180px ;
ketinggian : 90px ;
jejari sempadan : 0 0 12rem 12rem ;
warna latar belakang : ungu ;
}

Pengeluaran

Contoh 3: Cipta Separuh Bulatan dari Kanan dengan CSS

Untuk membuat separa bulatan CSS di sebelah kanan, mula-mula, laraskan ketinggian dan lebar bekas kerana ia perlu untuk mendapatkan bentuk bulatan yang betul. Menetapkan ' lebar 'sebagai' 90px ” dan “ ketinggian 'sebagai' 180px ' kali ini. Sekali lagi, gunakan sifat jejari sempadan dengan nilai ' 0 12rem 12rem 0 ”, di mana nilai pertama 0 adalah untuk bahagian atas kiri, nilai terakhir 0 adalah untuk bahagian bawah sebelah kiri, dan nilai kedua dan ketiga ditambah untuk memangkas bahagian atas kanan dan bawah sebelah kanan. Menggunakan nilai ini akan membentuk separuh bulatan dari kanan.

CSS

div {
lebar : 90px ;
ketinggian : 180px ;
jejari sempadan : 0 12rem 12rem 0 ;
warna latar belakang : ungu ;
}

Pengeluaran

Contoh 4: Buat Semi Bulatan dari Kiri dengan CSS

Kali ini, nyatakan sifat jejari sempadan sepanjang nilai ' 12rem 0 0 12rem ”; nilai pertama dan terakhir 12rem akan memangkas bahagian kiri atas dan kiri bawah div, menetapkan nilai kedua dan ketiga kepada 0 akan menjelaskan bahagian atas kanan dan bawah sebelah kanan bulatan. Akhirnya, separuh bulatan sebelah kiri kami akan dibuat.

CSS

div {
lebar : 90px ;
ketinggian : 180px ;
jejari sempadan : 12rem 0 0 12rem ;
warna latar belakang : ungu ;
}

Pengeluaran

Kami telah menawarkan kaedah yang berbeza untuk mencipta separuh bulatan dengan CSS.

Kesimpulan

Untuk membuat separuh bulatan, kita hanya boleh menggunakan CSS ' jejari sempadan ” harta benda. Separuh bulatan boleh dibuat dari sisi ke sisi, seperti ke kiri, kanan, atas dan bawah. Dalam sifat jejari sempadan, nilai awal adalah untuk bahagian atas sebelah kiri, yang kedua adalah untuk bahagian atas sebelah kanan, yang ketiga adalah untuk bahagian bawah sebelah kanan, dan nilai keempat adalah untuk sebelah kiri bawah. Tulisan ini telah menerangkan cara membuat separuh bulatan dengan CSS.