הסבירו צורות CSS: כיצד לצייר מעגל, משולש ועוד באמצעות CSS טהור

לפני שאנחנו מתחילים. אם אתה רוצה יותר תוכן בחינם אבל בפורמט וידאו. אל תחמיצו את ערוץ היוטיוב שלי בו אני מפרסם סרטונים שבועיים בקידוד FrontEnd.

//www.youtube.com/user/Weibenfalk

----------

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

להלן אסביר את היסודות של יצירת צורות בעזרת CSS. יש הרבה מה לספר לך על הנושא הזה! לכן לא אכסה את כל הכלים והצורות (רחוק מכל), אך זה אמור לתת לך מושג בסיסי כיצד נוצרים צורות בעזרת CSS.

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

צורות CSS - הדרך הבסיסית

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

ריבועים ומלבנים

ריבועים ומלבנים הם כנראה הצורות הקלות ביותר להשגה. כברירת מחדל, div הוא תמיד ריבוע או מלבן.

אתה מגדיר את הרוחב והגובה כפי שמוצג בקוד שלהלן. ואז זה רק עניין להעניק לאלמנט צבע רקע. אתה יכול לקבל את כל המאפיינים האחרים שאתה רוצה על האלמנט.

#square { background: lightblue; width: 100px; height: 100px; }

מעגלים

קל כמעט ליצור מעגל. כדי ליצור מעגל נוכל להגדיר את רדיוס הגבול על האלמנט. זה ייצור פינות מעוקלות על האלמנט.

אם נגדיר את זה ל 50% זה ייצור מעגל. אם תגדיר רוחב וגובה שונה נקבל אליפסה במקום.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

משולשים

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

יש לזכור כי קצוות הגבול באלמנט הם אלכסונים של 45 מעלות זה לזה. לכן שיטה זו פועלת ליצירת משולש. על ידי הגדרת אחד הגבולות לצבע אחיד והשני גבולות לשקוף הוא יקבל צורה של משולש.

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

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

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

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

במקרים מסוימים, עם צורות מתקדמות יותר, מומלץ גם להשתמש ב: אחרי ובפני בוחרי פסאודו. זה מחוץ לתחום של מאמר זה, מכיוון שכוונתי היא לכסות את היסודות בכדי להביא אתכם לדרך.

חִסָרוֹן

יש חסרון אחד גדול בגישה הנ"ל. לדוגמה, אם אתה רוצה שהטקסט שלך יזרום סביב ויעטוף את הצורה שלך. חלוקת HTML רגילה עם רקע וגבולות כדי ליצור את הצורה לא תאפשר זאת. הטקסט לא יסתגל ויזרום סביב הצורה שלך. במקום זאת הוא יזרום סביב הדיב עצמו (שהוא ריבוע או מלבן).

להלן איור המציג את המשולש וכיצד יזרום הטקסט.

למרבה המזל יש לנו במקום זאת כמה מאפייני CSS מודרניים.

צורות CSS - הדרך השנייה

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

יחד עם מאפיין זה יש לנו כמה צורות בסיסיות:

הַבלָעָה()

מעגל()

אֶלִיפְּסָה()

מְצוּלָע()

להלן טיפ : ניתן גם להשתמש במאפיין שביל קליפ . אתה יכול ליצור את הצורה שלך עם זה באותו אופן, אבל זה לא יאפשר לטקסט לעטוף את הצורה שלך כמו שצורה מבחוץ עושה.

יש לצוף את האלמנט שעליו אנו מחילים את הצורה עם המאפיין החיצוני. זה גם צריך להיות מוגדר רוחב וגובה. זה ממש חשוב לדעת!

תוכלו לקרוא עוד על הסיבה כאן. להלן טקסט שלקחתי מהקישור שסופק ל- developer.mozilla.org.

shape-outsideהמאפיין מצוין באמצעות הערכים מתוך הרשימה שלהלן, אשר מגדירים את האזור לצוף על אלמנטים צפים. אזור הציפה קובע את הצורה שסביבו תוכן מוטבע (אלמנטים צפים) עוטפים.

הַבלָעָה()

ניתן להשתמש בסוג ההכנסה () ליצירת מלבן / ריבוע עם קיזוז אופציונלי לטקסט העטיפה. זה מאפשר לך לספק ערכים כמה אתה רוצה שטקסט העטיפה שלך יחפוף את הצורה.

אתה יכול לציין את ההיסט זהה לכל ארבעת הכיוונים כך: שיבוץ (20 פיקסלים). או שניתן להגדיר אותו בנפרד לכל כיוון: שיבוץ (20 פיקסלים 5 פיקסלים 30 פיקסלים 10 פיקסלים) .

אתה יכול להשתמש ביחידות אחרות גם כדי לקבוע את הקיזוז, למשל אחוזים. הערכים תואמים כך: שיבוץ (למעלה מימין למעלה למטה) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:

Twitter — @weibenfalk,

Weibenfalk on Youtube,

Weibenfalk Courses Website.