Kako ustvariti polkrog s CSS

” znotraj oznake body naše datoteke HTML.

---

---

HTML

< div >< / div >

Zdaj nastavite ustrezne dimenzije za div, na primer dodelili bomo ' premer ' vrednost nepremičnine kot ' 180 slikovnih pik « in » višina ' lastnina z vrednostjo ' 90 slikovnih pik ”. V naslednjem koraku nastavite » mejni polmer 'vrednost nepremičnine' 12rem 12rem 0 0 ”; kjer bo prva številka 12rem obrezala zgornjo levo stran diva, druga 12rem bo obrezala zgornjo desno stran, tretja in četrta številka 0 pa bosta izrezali spodnji del diva. Nazadnje, da krogu dodate barvo, uporabite » Barva ozadja lastnost z vrednostjo vijolična ”.

CSS

div {
premer : 180 slikovnih pik ;
višina : 90 slikovnih pik ;
mejni polmer : 12rem 12rem 0 0 ;
Barva ozadja : vijolična ;
}

Shranite datoteko HTML z omenjeno kodo in jo odprite v brskalniku:

Kot lahko vidite, smo uspešno ustvarili polkrog z lastnostjo CSS border-radius.

Primer 2: Ustvarite polkrog od spodaj s CSS

Za oblikovanje polkroga od spodaj bomo nastavili vrednosti lastnosti polmera obrobe kot ' 0 0 12rem 12rem «, kjer prvi dve vrednosti predstavljata zgornji levi in ​​zgornji desni polmer obrobe. Nastavili smo jih na 0, da zgornja polovica div popolnoma izgine. Za dno smo obrezali samo malo spodnjo levo in spodnjo desno stran z nastavitvijo vrednosti na 12rem.

CSS

div {
premer : 180 slikovnih pik ;
višina : 90 slikovnih pik ;
mejni polmer : 0 0 12rem 12rem ;
Barva ozadja : vijolična ;
}

Izhod

Primer 3: Ustvarite polkrog z desne s CSS

Če želite narediti CSS polkrog v desno, najprej prilagodite višino in širino vsebnika, saj je potrebno, da dobite pravilno obliko kroga. Nastavite ' premer 'kot' 90 slikovnih pik « in » višina 'kot' 180 slikovnih pik ' tokrat. Ponovno uporabite lastnost border-radius z vrednostjo ' 0 12rem 12rem 0 «, kjer je prva vrednost 0 za zgornjo levo stran, zadnja vrednost 0 je za spodnjo levo stran, druga in tretja vrednost pa sta dodani za obrezovanje zgornje desne in spodnje desne strani. Če uporabite te vrednosti, boste z desne oblikovali polkrog.

CSS

div {
premer : 90 slikovnih pik ;
višina : 180 slikovnih pik ;
mejni polmer : 0 12rem 12rem 0 ;
Barva ozadja : vijolična ;
}

Izhod

Primer 4: ustvarite polkrog od leve s CSS

Tokrat določite lastnost border-radius vzdolž vrednosti ' 12rem 0 0 12rem ”; prva in zadnja vrednost 12rem bosta obrezali zgornjo levo in spodnjo levo stran diva, nastavitev druge in tretje vrednosti na 0 pa bo razčistila zgornjo desno in spodnjo desno stran kroga. Sčasoma bo ustvarjen naš levi polkrog.

CSS

div {
premer : 90 slikovnih pik ;
višina : 180 slikovnih pik ;
mejni polmer : 12rem 0 0 12rem ;
Barva ozadja : vijolična ;
}

Izhod

Ponudili smo različne metode za ustvarjanje polkroga s CSS.

Zaključek

Če želite ustvariti polkrog, lahko preprosto uporabimo CSS ' mejni polmer ” lastnina. Polkrog lahko ustvarite od strani do strani, na primer levo, desno, zgoraj in spodaj. V lastnosti border-radius je začetna vrednost za zgornji levi, druga za zgornji desni, tretja za spodnji desni in četrta vrednost za spodnjo levo stran. Ta zapis je razložil, kako ustvariti polkrog s CSS.