Paano Gumawa ng Semi Circle na may CSS

” elemento sa loob ng body tag ng aming HTML file.

---

---

HTML

< div >< / div >

Ngayon, itakda ang angkop na mga sukat para sa div, tulad ng pagtatalaga namin ng ' lapad 'halaga ng ari-arian bilang ' 180px 'at' taas ' ari-arian na may halaga ' 90px ”. Sa susunod na hakbang, itakda ang ' hangganan-radius ' halaga ng ari-arian ' 12rem 12rem 0 0 ”; kung saan ang unang digit na 12rem ay magpuputol sa kaliwang bahagi sa itaas ng div, ang pangalawang 12rem ay magpuputol sa kanang bahagi sa itaas, ang ikatlo at ikaapat na digit na 0 ay puputulin ang lahat-ng-ibaba na bahagi ng div. Panghuli, para bigyan ng kulay ang bilog, gamitin ang ' kulay ng background ' ari-arian na may halaga ' lila ”.

CSS

div {
lapad : 180px ;
taas : 90px ;
hangganan-radius : 12rem 12rem 0 0 ;
kulay ng background : lila ;
}

I-save ang HTML file gamit ang nabanggit na code at buksan ito sa iyong browser:

Gaya ng nakikita mo, matagumpay kaming nakagawa ng kalahating bilog na may CSS border-radius property.

Halimbawa 2: Gumawa ng Semi Circle mula sa Bottom gamit ang CSS

Para sa pagbuo ng isang kalahating bilog mula sa ibaba, itatakda namin ang mga halaga ng pag-aari ng border-radius bilang ' 0 0 12rem 12rem ”, kung saan ang unang dalawang value ay kumakatawan sa kaliwang itaas at kanang bahagi sa itaas na border-radius. Itinakda namin ang mga ito sa 0 upang tuluyang mawala ang kalahating bahagi ng div. Para sa ibaba, nag-trim lang kami ng maliit na kaliwang ibaba at kanang bahagi sa ibaba sa pamamagitan ng pagtatakda ng mga value sa 12rem.

CSS

div {
lapad : 180px ;
taas : 90px ;
hangganan-radius : 0 0 12rem 12rem ;
kulay ng background : lila ;
}

Output

Halimbawa 3: Gumawa ng Semi Circle mula sa Kanan gamit ang CSS

Upang makagawa ng kalahating bilog ng CSS sa kanan, ayusin muna ang taas at lapad ng lalagyan dahil kinakailangan upang makuha ang tamang hugis ng bilog. Itakda ang ' lapad 'bilang' 90px 'at' taas 'bilang' 180px ” sa pagkakataong ito. Muli, gamitin ang border-radius property na may value na ' 0 12rem 12rem 0 ”, kung saan ang unang value na 0 ay para sa kaliwang bahagi sa itaas, ang huling value na 0 ay para sa kaliwang bahagi sa ibaba, at idinaragdag ang pangalawa at pangatlong value upang i-trim ang kanang bahagi sa itaas at kanang bahagi sa ibaba. Ang paglalapat ng mga halagang ito ay bubuo ng kalahating bilog mula sa kanan.

CSS

div {
lapad : 90px ;
taas : 180px ;
hangganan-radius : 0 12rem 12rem 0 ;
kulay ng background : lila ;
}

Output

Halimbawa 4: Gumawa ng Semi Circle mula sa Kaliwa gamit ang CSS

Sa pagkakataong ito, tukuyin ang border-radius property kasama ang value ' 12rem 0 0 12rem ”; ang una at huling value na 12rem ay magpapagupit sa kaliwang itaas at kaliwang ibaba ng div, ang pagtatakda ng pangalawa at pangatlong value sa 0 ay magpapalinaw sa kanang itaas at kanang ibaba ng bilog. Sa kalaunan, malilikha ang aming kaliwang bahagi na kalahating bilog.

CSS

div {
lapad : 90px ;
taas : 180px ;
hangganan-radius : 12rem 0 0 12rem ;
kulay ng background : lila ;
}

Output

Nag-alok kami ng iba't ibang paraan para sa paglikha ng kalahating bilog na may CSS.

Konklusyon

Upang lumikha ng isang kalahating bilog, maaari lamang nating gamitin ang CSS ' hangganan-radius ” ari-arian. Ang kalahating bilog ay maaaring gawin mula sa gilid hanggang sa gilid, tulad ng sa kaliwa, kanan, itaas at ibaba. Sa property na border-radius, ang paunang value ay para sa kaliwang itaas, ang pangalawa ay para sa kanang itaas, ang pangatlo ay para sa kanang ibaba, at ang pang-apat na value ay para sa kaliwang bahagi sa ibaba. Ipinaliwanag ng write-up na ito kung paano gumawa ng semi-circle na may CSS.