Kako stvoriti polukrug pomoću CSS-a

” unutar oznake tijela naše HTML datoteke.

---

---

HTML

< div >< / div >

Sada postavite odgovarajuće dimenzije za div, kao što ćemo dodijeliti ' širina ' vrijednost imovine kao ' 180 px ' i ' visina 'imovina s vrijednošću' 90 px ”. U sljedećem koraku postavite ' granični radijus 'vrijednost nekretnine' 12rem 12rem 0 0 ”; gdje će prva znamenka 12rem obrezati gornju lijevu stranu diva, druga 12rem će obrezati gornju desnu stranu, treća i četvrta znamenka 0 će izrezati cijeli donji dio diva. Na kraju, da biste dali boju krugu, upotrijebite ' boja pozadine ' svojstvo s vrijednošću ' ljubičasta ”.

CSS

div {
širina : 180 px ;
visina : 90 px ;
granični radijus : 12rem 12rem 0 0 ;
boja pozadine : ljubičasta ;
}

Spremite HTML datoteku sa spomenutim kodom i otvorite je u svom pregledniku:

Kao što vidite, uspješno smo kreirali polukrug sa svojstvom CSS border-radius.

Primjer 2: Stvorite polukrug odozdo pomoću CSS-a

Za formiranje polukruga odozdo, postavit ćemo vrijednosti svojstava rubnog radijusa kao ' 0 0 12rem 12rem ”, gdje prve dvije vrijednosti predstavljaju gornji lijevi i gornji desni rubni polumjer. Postavili smo ih na 0 kako bi gornja polovica diva potpuno nestala. Za dno smo samo malo podrezali donju lijevu i donju desnu stranu postavljanjem vrijednosti na 12rem.

CSS

div {
širina : 180 px ;
visina : 90 px ;
granični radijus : 0 0 12rem 12rem ;
boja pozadine : ljubičasta ;
}

Izlaz

Primjer 3: Stvorite polukrug s desne strane pomoću CSS-a

Da biste napravili CSS polukrug s desne strane, prvo podesite visinu i širinu spremnika jer je potrebno da dobijete pravilan oblik kruga. Postavi ' širina ” kao “ 90 px ' i ' visina ” kao “ 180 px ' ovaj put. Opet, upotrijebite svojstvo border-radius s vrijednošću ' 0 12rem 12rem 0 “, pri čemu je prva vrijednost 0 za gornju lijevu stranu, posljednja vrijednost 0 je za donju lijevu stranu, a druga i treća vrijednost se dodaju za rezanje gornje desne i donje desne strane. Primjenom ovih vrijednosti formirat će se polukrug s desne strane.

CSS

div {
širina : 90 px ;
visina : 180 px ;
granični radijus : 0 12rem 12rem 0 ;
boja pozadine : ljubičasta ;
}

Izlaz

Primjer 4: Stvorite polukrug slijeva pomoću CSS-a

Ovaj put odredite svojstvo border-radius duž vrijednosti ' 12rem 0 0 12rem ”; prva i posljednja vrijednost 12rem skratit će gornju lijevu i donju lijevu stranu diva, postavljanje druge i treće vrijednosti na 0 razjasnit će gornju desnu i donju desnu stranu kruga. Na kraju će se stvoriti naš lijevi polukrug.

CSS

div {
širina : 90 px ;
visina : 180 px ;
granični radijus : 12rem 0 0 12rem ;
boja pozadine : ljubičasta ;
}

Izlaz

Ponudili smo različite metode za stvaranje polukruga pomoću CSS-a.

Zaključak

Da bismo stvorili polukrug, možemo jednostavno upotrijebiti CSS ' granični radijus ” vlasništvo. Polukrug se može stvoriti s jedne strane na drugu, primjerice lijevo, desno, gore i dolje. U svojstvu border-radius, početna vrijednost je za gornji lijevi, druga je za gornji desni, treća je za donji desni, a četvrta vrijednost je za donju lijevu stranu. Ovaj zapis objašnjava kako stvoriti polukrug pomoću CSS-a.