CSSతో సెమీ సర్కిల్‌ను ఎలా సృష్టించాలి

” మా HTML ఫైల్ యొక్క బాడీ ట్యాగ్ లోపల మూలకం.

---

---

HTML

< div >< / div >

ఇప్పుడు, div కోసం తగిన కొలతలు సెట్ చేయండి, అంటే మనం “ని కేటాయిస్తాము వెడల్పు 'ఆస్తి విలువ' 180px 'మరియు' ఎత్తు 'విలువ కలిగిన ఆస్తి' 90px ”. తదుపరి దశలో, 'ని సెట్ చేయండి సరిహద్దు-వ్యాసార్థం 'ఆస్తి విలువ' 12rem 12rem 0 0 ”; మొదటి అంకె 12rem div యొక్క ఎడమ ఎగువ భాగాన్ని ట్రిమ్ చేస్తుంది, రెండవ 12rem ఎగువ కుడి వైపును ట్రిమ్ చేస్తుంది, మూడవ మరియు నాల్గవ అంకె 0 div యొక్క మొత్తం-దిగువ భాగాన్ని కట్ చేస్తుంది. చివరగా, సర్కిల్‌కు రంగును ఇవ్వడానికి, “ని ఉపయోగించండి నేపథ్య రంగు 'విలువతో ఆస్తి' ఊదా ”.

CSS

div {
వెడల్పు : 180px ;
ఎత్తు : 90px ;
సరిహద్దు-వ్యాసార్థం : 12 రెం 12 రెం 0 0 ;
నేపథ్య రంగు : ఊదా ;
}

పేర్కొన్న కోడ్‌తో HTML ఫైల్‌ను సేవ్ చేసి, దాన్ని మీ బ్రౌజర్‌లో తెరవండి:

మీరు చూడగలిగినట్లుగా, మేము CSS సరిహద్దు-వ్యాసార్థం ప్రాపర్టీతో సెమీ సర్కిల్‌ను విజయవంతంగా సృష్టించాము.

ఉదాహరణ 2: CSSతో దిగువ నుండి సెమీ సర్కిల్‌ను సృష్టించండి

దిగువ నుండి సెమీ సర్కిల్ ఏర్పడటానికి, మేము సరిహద్దు-వ్యాసార్థం ఆస్తి విలువలను ఇలా సెట్ చేస్తాము ' 0 0 12rem 12rem ”, ఇక్కడ మొదటి రెండు విలువలు ఎగువ ఎడమ మరియు ఎగువ కుడి వైపు సరిహద్దు-వ్యాసార్థాన్ని సూచిస్తాయి. div యొక్క పైభాగం పూర్తిగా కనిపించకుండా పోయేలా చేయడానికి మేము వాటిని 0కి సెట్ చేసాము. దిగువ కోసం, మేము విలువలను 12remకి సెట్ చేయడం ద్వారా కొద్దిగా దిగువ ఎడమ మరియు దిగువ కుడి వైపున మాత్రమే కత్తిరించాము.

CSS

div {
వెడల్పు : 180px ;
ఎత్తు : 90px ;
సరిహద్దు-వ్యాసార్థం : 0 0 12 రెం 12 రెం ;
నేపథ్య రంగు : ఊదా ;
}

అవుట్‌పుట్

ఉదాహరణ 3: CSSతో కుడి నుండి సెమీ సర్కిల్‌ను సృష్టించండి

CSS సెమీ సర్కిల్‌ను కుడివైపున చేయడానికి, ముందుగా, సర్కిల్ యొక్క సరైన ఆకారాన్ని పొందడానికి అవసరమైన కంటైనర్ యొక్క ఎత్తు మరియు వెడల్పును సర్దుబాటు చేయండి. ఏర్పరచు ' వెడల్పు 'వలే' 90px 'మరియు' ఎత్తు 'వలే' 180px ” ఈసారి. మళ్ళీ, విలువతో సరిహద్దు-వ్యాసార్థం ఆస్తిని ఉపయోగించండి ' 0 12rem 12rem 0 ”, ఇక్కడ మొదటి విలువ 0 ఎగువ ఎడమ వైపు, చివరి విలువ 0 దిగువ ఎడమ వైపు మరియు రెండవ మరియు మూడవ విలువలు ఎగువ కుడి మరియు దిగువ కుడి వైపు ట్రిమ్ చేయడానికి జోడించబడతాయి. ఈ విలువలను వర్తింపజేయడం వలన కుడివైపు నుండి సెమీ సర్కిల్ ఏర్పడుతుంది.

CSS

div {
వెడల్పు : 90px ;
ఎత్తు : 180px ;
సరిహద్దు-వ్యాసార్థం : 0 12 రెం 12 రెం 0 ;
నేపథ్య రంగు : ఊదా ;
}

అవుట్‌పుట్

ఉదాహరణ 4: CSSతో ఎడమ నుండి సెమీ సర్కిల్‌ను సృష్టించండి

ఈసారి, విలువతో పాటు సరిహద్దు-వ్యాసార్థం ఆస్తిని పేర్కొనండి ' 12rem 0 0 12rem ”; మొదటి మరియు చివరి విలువ 12rem div యొక్క ఎగువ ఎడమ మరియు దిగువ ఎడమ వైపు ట్రిమ్ చేస్తుంది, రెండవ మరియు మూడవ విలువను 0కి సెట్ చేయడం వలన సర్కిల్ యొక్క కుడి ఎగువ మరియు దిగువ కుడి వైపు స్పష్టంగా కనిపిస్తుంది. చివరికి, మా ఎడమ వైపు సెమీ సర్కిల్ సృష్టించబడుతుంది.

CSS

div {
వెడల్పు : 90px ;
ఎత్తు : 180px ;
సరిహద్దు-వ్యాసార్థం : 12 రెం 0 0 12 రెం ;
నేపథ్య రంగు : ఊదా ;
}

అవుట్‌పుట్

మేము CSSతో సెమీ సర్కిల్‌ను రూపొందించడానికి వివిధ పద్ధతులను అందించాము.

ముగింపు

సెమీ సర్కిల్‌ను సృష్టించడానికి, మేము కేవలం CSSని ఉపయోగించుకోవచ్చు ' సరిహద్దు-వ్యాసార్థం ”ఆస్తి. సెమీ సర్కిల్‌ను ఎడమ, కుడి, ఎగువ మరియు దిగువ వంటి వైపు నుండి ప్రక్కకు సృష్టించవచ్చు. సరిహద్దు-వ్యాసార్థం ఆస్తిలో, ప్రారంభ విలువ ఎగువ ఎడమ వైపున ఉంటుంది, రెండవది ఎగువ కుడి వైపున ఉంటుంది, మూడవది దిగువ కుడి వైపున ఉంటుంది మరియు నాల్గవ విలువ దిగువ ఎడమ వైపున ఉంటుంది. CSSతో సెమీ సర్కిల్‌ను ఎలా సృష్టించాలో ఈ వ్రాత వివరించింది.