كيفية إنشاء نصف دائرة باستخدام CSS

'داخل علامة النص الأساسي لملف HTML الخاص بنا.

---

---

لغة البرمجة

< شعبة > < / شعبة >

الآن ، قم بتعيين الأبعاد المناسبة لـ div ، مثل أننا سنقوم بتعيين ' العرض 'قيمة الممتلكات كـ' 180 بكسل ' و ' ارتفاع 'الممتلكات ذات القيمة' 90px '. في الخطوة التالية ، قم بتعيين ' نصف قطر الحد 'قيمة الممتلكات' 12 ريم 12 ريم 0 0 '؛ حيث سيقطع الرقم الأول 12rem الجانب الأيسر العلوي من div ، سيقطع الرقم الثاني 12rem الجانب الأيمن العلوي ، وسيقطع الرقم الثالث والرابع 0 الجزء السفلي بالكامل من div. أخيرًا ، لإعطاء لون للدائرة ، استخدم ' لون الخلفية 'الملكية بالقيمة' ليلكي '.

CSS

شعبة {
العرض : 180 بكسل ؛
ارتفاع : 90px ؛
نصف قطر الحد : 12 ريم 12 ريم 0 0 ؛
لون الخلفية : ليلكي ؛
}

احفظ ملف HTML بالكود المذكور وافتحه في متصفحك:

كما ترى ، لقد نجحنا في إنشاء نصف دائرة بخاصية CSS border-radius.

مثال 2: قم بإنشاء نصف دائرة من الأسفل باستخدام CSS

لتشكيل نصف دائرة من الأسفل ، سنقوم بتعيين قيم خاصية نصف قطر الحدود على أنها ' 0 0 12 ريم 12 ريم '، حيث تمثل القيمتان الأوليان نصف قطر الحد العلوي الأيسر والأعلى للجانب الأيمن. لقد قمنا بتعيينهم على 0 لجعل النصف العلوي من div يختفي تمامًا. بالنسبة للأسفل ، قمنا فقط بقص الجانب الأيمن السفلي والسفلي قليلاً عن طريق تعيين القيم على 12rem.

CSS

شعبة {
العرض : 180 بكسل ؛
ارتفاع : 90px ؛
نصف قطر الحد : 0 0 12 ريم 12 ريم ؛
لون الخلفية : ليلكي ؛
}

انتاج |

مثال 3: قم بإنشاء نصف دائرة من اليمين باستخدام CSS

لإنشاء نصف دائرة CSS إلى اليمين ، أولاً ، اضبط ارتفاع الحاوية وعرضها حيث أنه من الضروري الحصول على الشكل المناسب للدائرة. تعيين ' العرض ' كما ' 90px ' و ' ارتفاع ' كما ' 180 بكسل ' هذا الوقت. مرة أخرى ، استخدم خاصية border-radius بالقيمة ' 0 12 ريم 12 ريم 0 '، حيث تكون القيمة الأولى 0 للجانب الأيسر العلوي ، والقيمة الأخيرة 0 للجانب الأيسر السفلي ، وتتم إضافة القيمتين الثانية والثالثة لقص الجانب الأيمن العلوي والسفلي الأيمن. سيؤدي تطبيق هذه القيم إلى تشكيل نصف دائرة من جهة اليمين.

CSS

شعبة {
العرض : 90px ؛
ارتفاع : 180 بكسل ؛
نصف قطر الحد : 0 12 ريم 12 ريم 0 ؛
لون الخلفية : ليلكي ؛
}

انتاج |

مثال 4: قم بإنشاء نصف دائرة من اليسار باستخدام CSS

هذه المرة ، حدد خاصية border-radius على طول القيمة ' 12 ريم 0 0 12 ريم '؛ ستعمل القيمة الأولى والأخيرة 12rem على قطع الجانب الأيسر العلوي والسفلي الأيسر من div ، وسيؤدي تعيين القيمة الثانية والثالثة إلى 0 إلى توضيح الجانب الأيمن العلوي والسفلي الأيمن من الدائرة. في النهاية ، سيتم إنشاء نصف دائرة على الجانب الأيسر.

CSS

شعبة {
العرض : 90px ؛
ارتفاع : 180 بكسل ؛
نصف قطر الحد : 12 ريم 0 0 12 ريم ؛
لون الخلفية : ليلكي ؛
}

انتاج |

لقد قدمنا ​​طرقًا مختلفة لإنشاء نصف دائرة باستخدام CSS.

استنتاج

لإنشاء نصف دائرة ، يمكننا ببساطة استخدام CSS ' نصف قطر الحد ' منشأه. يمكن إنشاء نصف الدائرة من جانب إلى آخر ، مثل اليسار واليمين والأعلى والأسفل. في خاصية border-radius ، القيمة الأولية لأعلى اليسار ، والثانية لأعلى اليمين ، والثالثة لأسفل اليمين ، والقيمة الرابعة للجانب الأيسر السفلي. لقد أوضحت هذه الكتابة كيفية إنشاء نصف دائرة باستخدام CSS.