כיצד ליצור חצי עיגול עם CSS

' אלמנט בתוך תג הגוף של קובץ ה-HTML שלנו.

---

---

HTML

< div >< / div >

כעת, הגדר את הממדים המתאימים ל-div, כגון שנקצה את ' רוֹחַב 'ערך הנכס כ' 180 פיקסלים ' ו' גוֹבַה 'נכס עם ערך' 90 פיקסלים '. בשלב הבא, הגדר את ' גבול-רדיוס ' ערך הנכס ' 12 רם 12 רם 0 0 '; כאשר הספרה הראשונה 12rem תקצץ את הצד השמאלי העליון של ה-div, ה-12rem השני יקצץ את הצד הימני העליון, הספרה השלישית והרביעית 0 תגזור את החלק התחתון של ה-div. לבסוף, כדי לתת צבע לעיגול, השתמש ב-' צבע רקע 'נכס עם הערך' סָגוֹל '.

CSS

div {
רוֹחַב : 180 פיקסלים ;
גוֹבַה : 90 פיקסלים ;
גבול-רדיוס : 12 רם 12 רם 0 0 ;
צבע רקע : סָגוֹל ;
}

שמור את קובץ ה-HTML עם הקוד שהוזכר ופתח אותו בדפדפן שלך:

כפי שאתה יכול לראות, יצרנו בהצלחה חצי עיגול עם מאפיין CSS border-radius.

דוגמה 2: צור חצי עיגול מלמטה עם CSS

ליצירת חצי עיגול מלמטה, נגדיר ערכי מאפיין רדיוס גבול כ' 0 0 12rem 12rem ', כאשר שני הערכים הראשונים מייצגים את רדיוס הגבול השמאלי העליון והצד הימני העליון. הגדרנו אותם ל-0 כדי לגרום לחצי העליון של ה-div להיעלם לחלוטין. עבור החלק התחתון, קיצרנו רק מעט צד שמאל למטה וצד ימין למטה על ידי הגדרת הערכים ל-12rem.

CSS

div {
רוֹחַב : 180 פיקסלים ;
גוֹבַה : 90 פיקסלים ;
גבול-רדיוס : 0 0 12 רם 12 רם ;
צבע רקע : סָגוֹל ;
}

תְפוּקָה

דוגמה 3: צור חצי עיגול מימין עם CSS

כדי ליצור חצי עיגול CSS ימינה, ראשית, כוונן את הגובה והרוחב של המיכל, שכן יש צורך לקבל את הצורה הנכונה של העיגול. הגדר את ' רוֹחַב ' כפי ש ' 90 פיקסלים ' ו' גוֹבַה ' כפי ש ' 180 פיקסלים ' הפעם. שוב, השתמש במאפיין הגבול-רדיוס עם הערך ' 0 12 רם 12 רם 0 ', כאשר הערך הראשון 0 הוא עבור הצד השמאלי העליון, הערך האחרון 0 הוא עבור הצד השמאלי התחתון, והערכים השני והשלישי מתווספים כדי לחתוך את הצד הימני העליון והצד הימני התחתון. יישום ערכים אלה יוצר חצי עיגול מימין.

CSS

div {
רוֹחַב : 90 פיקסלים ;
גוֹבַה : 180 פיקסלים ;
גבול-רדיוס : 0 12 רם 12 רם 0 ;
צבע רקע : סָגוֹל ;
}

תְפוּקָה

דוגמה 4: צור חצי עיגול משמאל עם CSS

הפעם, ציין את מאפיין הגבול-רדיוס לאורך הערך ' 12rem 0 0 12rem '; הערך הראשון והאחרון 12rem יקצץ את הצד השמאלי העליון והצד השמאלי התחתון של ה-div, הגדרת הערך השני והשלישי ל-0 תבהיר את הצד הימני העליון והצד הימני התחתון של המעגל. בסופו של דבר, חצי העיגול בצד שמאל שלנו ייווצר.

CSS

div {
רוֹחַב : 90 פיקסלים ;
גוֹבַה : 180 פיקסלים ;
גבול-רדיוס : 12 רם 0 0 12 רם ;
צבע רקע : סָגוֹל ;
}

תְפוּקָה

הצענו שיטות שונות ליצירת חצי עיגול עם CSS.

סיכום

כדי ליצור חצי עיגול, אנחנו יכולים פשוט להשתמש ב-CSS ' גבול-רדיוס ' תכונה. ניתן ליצור את חצי העיגול מצד לצד, כמו משמאל, ימין, למעלה ולמטה. במאפיין הגבול-רדיוס, הערך ההתחלתי הוא עבור הצד השמאלי העליון, השני הוא עבור הצד הימני העליון, השלישי הוא עבור הימין התחתון, והערך הרביעי הוא עבור הצד השמאלי התחתון. כתבה זו הסבירה כיצד ליצור חצי עיגול עם CSS.