سی ایس ایس کے ساتھ سیمی سرکل کیسے بنایا جائے۔

ہماری HTML فائل کے باڈی ٹیگ کے اندر عنصر۔

---

---

ایچ ٹی ایم ایل

< div >< / div >

اب، div کے لیے مناسب جہتیں متعین کریں، جیسے کہ ہم تفویض کریں گے ' چوڑائی ' جائیداد کی قیمت بطور ' 180px 'اور' اونچائی 'قیمت کے ساتھ جائیداد' 90px ' اگلے مرحلے میں، سیٹ کریں ' سرحدی رداس 'جائیداد کی قیمت' 12ریم 12ریم 0 0 ”; جہاں پہلا ہندسہ 12rem div کے اوپری بائیں جانب کو تراشے گا، دوسرا 12rem اوپری دائیں طرف کو تراشے گا، تیسرا اور چوتھا ہندسہ 0 div کے تمام نیچے والے حصے کو کاٹ دے گا۔ آخر میں، دائرے کو رنگ دینے کے لیے، استعمال کریں ' پس منظر کا رنگ 'قیمت کے ساتھ پراپرٹی' جامنی '

سی ایس ایس

div {
چوڑائی : 180px ;
اونچائی : 90px ;
سرحدی رداس : 12ریم 12ریم 0 0 ;
پس منظر کا رنگ : جامنی ;
}

HTML فائل کو مذکورہ کوڈ کے ساتھ محفوظ کریں اور اسے اپنے براؤزر میں کھولیں:

جیسا کہ آپ دیکھ سکتے ہیں، ہم نے کامیابی کے ساتھ CSS بارڈر-ریڈیس پراپرٹی کے ساتھ ایک نیم دائرہ بنایا ہے۔

مثال 2: CSS کے ساتھ نیچے سے ایک سیمی سرکل بنائیں

نیچے سے ایک نیم دائرے کی تشکیل کے لیے، ہم سرحدی رداس کی خاصیت کی اقدار کو ' 0 0 12rem 12rem ”، جہاں پہلی دو قدریں اوپری بائیں اور اوپری دائیں طرف والے سرحدی رداس کی نمائندگی کرتی ہیں۔ ہم نے انہیں 0 پر سیٹ کیا ہے تاکہ div کے اوپری نصف کو مکمل طور پر غائب ہو جائے۔ نیچے کے لیے، ہم نے قدروں کو 12rem پر سیٹ کرکے صرف نیچے بائیں اور نیچے دائیں جانب تھوڑا سا تراش لیا ہے۔

سی ایس ایس

div {
چوڑائی : 180px ;
اونچائی : 90px ;
سرحدی رداس : 0 0 12ریم 12ریم ;
پس منظر کا رنگ : جامنی ;
}

آؤٹ پٹ

مثال 3: سی ایس ایس کے ساتھ دائیں طرف سے ایک نیم دائرہ بنائیں

سی ایس ایس سیمی سرکل کو دائیں طرف بنانے کے لیے، پہلے کنٹینر کی اونچائی اور چوڑائی کو ایڈجسٹ کریں کیونکہ دائرے کی مناسب شکل حاصل کرنا ضروری ہے۔ مقرر ' چوڑائی 'جیسے' 90px 'اور' اونچائی 'جیسے' 180px 'اس بار. دوبارہ، قدر کے ساتھ سرحدی رداس کی خاصیت کا استعمال کریں ' 0 12 ریم 12 ریم 0 ”، جہاں پہلی قدر 0 اوپری بائیں جانب کے لیے ہے، آخری قدر 0 نیچے بائیں جانب کے لیے ہے، اور دوسری اور تیسری قدریں اوپر کے دائیں اور نیچے دائیں جانب تراشنے کے لیے شامل کی جاتی ہیں۔ ان اقدار کو لاگو کرنے سے دائیں طرف سے ایک نیم دائرہ بن جائے گا۔

سی ایس ایس

div {
چوڑائی : 90px ;
اونچائی : 180px ;
سرحدی رداس : 0 12ریم 12ریم 0 ;
پس منظر کا رنگ : جامنی ;
}

آؤٹ پٹ

مثال 4: CSS کے ساتھ بائیں سے ایک نیم دائرہ بنائیں

اس بار، قدر کے ساتھ سرحدی رداس کی خاصیت کی وضاحت کریں ' 12ریم 0 0 12ریم ”; پہلی اور آخری قدر 12rem div کے اوپری بائیں اور نیچے بائیں جانب کو تراشے گی، دوسری اور تیسری قدر کو 0 پر سیٹ کرنے سے دائرے کے اوپری دائیں اور نیچے دائیں جانب واضح ہو جائے گا۔ آخر کار، ہمارا بائیں طرف والا نیم دائرہ بن جائے گا۔

سی ایس ایس

div {
چوڑائی : 90px ;
اونچائی : 180px ;
سرحدی رداس : 12ریم 0 0 12ریم ;
پس منظر کا رنگ : جامنی ;
}

آؤٹ پٹ

ہم نے سی ایس ایس کے ساتھ نیم دائرہ بنانے کے لیے مختلف طریقے پیش کیے ہیں۔

نتیجہ

ایک نیم دائرہ بنانے کے لیے، ہم آسانی سے CSS کا استعمال کر سکتے ہیں۔ سرحدی رداس ' جائیداد. نیم دائرے کو ایک طرف سے دوسری طرف بنایا جا سکتا ہے، جیسے کہ بائیں، دائیں، اوپر اور نیچے۔ بارڈر-ریڈیس پراپرٹی میں، ابتدائی قدر اوپر بائیں جانب، دوسری قیمت اوپری دائیں، تیسری نیچے دائیں، اور چوتھی قدر نیچے بائیں جانب کے لیے ہے۔ اس تحریر میں سی ایس ایس کے ساتھ نیم دائرہ بنانے کا طریقہ بتایا گیا ہے۔