יצירת משולש באמצעות CSS

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

שימו לב לדבר הבא:

ועוד אחד –

למה שנשתמש CSS ולא בתמונה?

1. קודם כל – תמיד עדיף להשתמש בCSS כשאפשר, כדי לחסוך טעינת תמונה נוספת מהשרת. עניין של מהירות טעינה. וכשיש הרבה חיצים בעמוד והשרת איטי – זה עשוי להיות משמעותי.
2. גמישות ופרקטיות – אם המעצב החליט להקטין את החץ – לא צריך תמונה חדשה. אם רוצים להנגיש את העמוד לצבעי שחור-צהוב – לא צריך תמונה חדשה. פשוט משחקים עם ההגדרות ומקבלים את החץ המעודכן. כנ"ל בקטע הרספונסיבי – אם במובייל החץ משתנה – בכיף, לא צריך לטעון תמונה נוספת.
3. לעיתים לוקח לדפדפן זמן לטעון תמונות, אם בגלל עומס, או סתם בגלל איטיות דפדפן או שרת וענייני רוחב פס. לכן לפעמים ניתן לראות שהתוכן של העמודים נטען כבר כולל הCSS, ורק אי אלו תמונות חסרות. לא חבל?!

השתכנעתי. עכשיו איך זה עובד?

נותנים לאלמנט ריק, ללא תוכן את הגדרות הCSS הבאות:

height:0;
width:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;

ונסביר.

חשבתם פעם, כשמגדירים מסגרת לאלמנט, עד איפה מגיע החלק של border-right? איפה מתחיל border-top? איפה נקודת ההתחלפות ביניהם? כנראה שלא… נקודת ההתחלפות היא בדיוק בקצה, ואם יש לנו מסגרת שהעובי שלה עבה – קו ההתחלפות בין הצדדים הוא באלכסון מהקצה של האלמנט החוצה.

 לאחר שהבנו את זה – נוכל להבין איך עובד עניין המשולשים.

יש לנו אלמנט שמוגדר בלי גודל – גובהו 0 פיקסלים בדיוק כמו רוחבו. סוג המסגרת הוא solid – קו חלק, כדי שנגיע להתנהגות הרצויה (נסו לעשות את זה עם border-style: double… תוצאה נהדרת!)

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

מתקרבים, האין זאת?

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

עובי וצבע המסגרת

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

נניח שאנחנו רוצים ליצור משולש אדום הפונה ימינה. רוחב החיתוך – 10 פיקסלים וגובהו 30. ההגדרות שניתן הן אלה:

border-top: 15px solid transparent;
border-bottom: 15px solid transparent;

אלו שתי הצדדים שליד הכיוון שאליו מצביע החץ שלי. בחץ הפונה למעלה או למטה – ההגדרות הללו יהיו עבור border-right + border left.

המס' 15 מייצג מחצית מהערך Y שלנו – מחצית מגובה החיתוך.

כעת לשורה האחרונה:

border-left: 10px solid red;

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

לסיכום

הגדרות קבועות:

height: 0px;
 width: 0px; 
border-style: solid;

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

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

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

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

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

ניתן להשתמש בbefore או after

ניתן לחסוך שימוש באלמנט HTML נפרד עבור המשולש, ולהשתמש באחד מהאלמנטים הפיקטיביים before & after. לדוגמה בתפריט שוורדפרס מייצר אוטומטית אין אלמנטים נלווים עבור תתי תפריט. במקרה זה מאד פשוט להשתמש בbefore של הa, כשיש לli שמעליו את הקלאס menu-item-has-children. זה קל, נקי ופשוט.

עד כאן להפעם. בהצלחה רבה!