Kuidas CSS-iga poolringi luua

” element meie HTML-faili kehasildis.

---

---

HTML

< div >< / div >

Nüüd määrake div jaoks sobivad mõõtmed, näiteks määrame ' laius ' vara väärtus kui ' 180 pikslit ” ja „ kõrgus 'väärtusega vara' 90 pikslit ”. Järgmises etapis määrake ' piiri raadius 'vara väärtus' 12rem 12rem 0 0 ”; kus esimene number 12rem kärbib div ülemise vasaku külje, teine ​​12rem kärbib paremat ülaosa, kolmas ja neljas number 0 lõikavad välja div kogu alumise osa. Lõpuks kasutage ringile värvi andmiseks nuppu ' taustavärv ' vara väärtusega ' lilla ”.

CSS

div {
laius : 180 pikslit ;
kõrgus : 90 pikslit ;
piiri raadius : 12rem 12rem 0 0 ;
taustavärv : lilla ;
}

Salvestage nimetatud koodiga HTML-fail ja avage see oma brauseris:

Nagu näete, oleme edukalt loonud CSS-i piiriraadiuse atribuudiga poolringi.

Näide 2: looge CSS-iga alt poolring

Alt poolringi moodustamiseks määrame piiriraadiuse atribuutide väärtused ' 0 0 12rem 12rem ”, kus kaks esimest väärtust tähistavad ülemist vasakut ja ülemist paremat serva raadiust. Oleme määranud need väärtusele 0, et divi ülemine pool täielikult kaoks. Põhja jaoks oleme kärpinud ainult veidi alumist vasakut ja alumist paremat külge, määrates väärtusteks 12rem.

CSS

div {
laius : 180 pikslit ;
kõrgus : 90 pikslit ;
piiri raadius : 0 0 12rem 12rem ;
taustavärv : lilla ;
}

Väljund

Näide 3: Looge CSS-iga paremalt poolring

Parempoolse CSS-i poolringi tegemiseks reguleerige kõigepealt konteineri kõrgust ja laiust, kuna see on vajalik ringi õige kuju saamiseks. Määra ' laius ” kui „ 90 pikslit ” ja „ kõrgus ” kui „ 180 pikslit ' seekord. Jällegi kasutage piiriraadiuse atribuuti väärtusega ' 0 12rem 12rem 0 ”, kus esimene väärtus 0 on vasaku ülaosa jaoks, viimane väärtus 0 all vasaku külje jaoks ning teine ​​ja kolmas väärtus lisatakse, et kärpida ülemist paremat ja alumist paremat külge. Nende väärtuste rakendamisel moodustub paremalt poolring.

CSS

div {
laius : 90 pikslit ;
kõrgus : 180 pikslit ;
piiri raadius : 0 12rem 12rem 0 ;
taustavärv : lilla ;
}

Väljund

Näide 4: Looge CSS-iga vasakult poolring

Seekord määrake atribuut border-radius koos väärtusega ' 12rem 0 0 12rem ”; esimene ja viimane väärtus 12rem kärbivad div ülemise ja alumise vasaku külje, teise ja kolmanda väärtuse määramine 0-ks muudab ringi parema üla- ja alaosa selgeks. Lõpuks luuakse meie vasakpoolne poolring.

CSS

div {
laius : 90 pikslit ;
kõrgus : 180 pikslit ;
piiri raadius : 12rem 0 0 12rem ;
taustavärv : lilla ;
}

Väljund

Oleme pakkunud erinevaid meetodeid poolringi loomiseks CSS-iga.

Järeldus

Poolringi loomiseks saame lihtsalt kasutada CSS-i ' piiri raadius ” vara. Poolringi saab luua küljelt küljele, näiteks vasakule, paremale, üles ja alla. Piiriraadiuse atribuudis on algväärtus vasaku ülaosa jaoks, teine ​​​​parempoolse ülaosa jaoks, kolmas all paremal ja neljas väärtus all vasakule küljele. Selles kirjutises on selgitatud, kuidas CSS-iga poolringi luua.