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

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
ההצהרה shape-outside: url(image.png)
ב-CSS מורה לדפדפן לחלץ צורה מהתמונה.
המאפיין shape-image-threshold
מגדיר את רמת האטימות המינימלית של הפיקסלים שישמשו ליצירת הצורה. הערך שלו חייב להיות בטווח שבין 0.0
(שקיפות מלאה) ל-1.0
(אטום לחלוטין). כלומר, הערך shape-image-threshold: 0.5
מציין שרק פיקסלים עם שקיפות של 50% ומעלה ישמשו ליצירת הצורה.
המפתח כאן הוא המאפיין float
. המאפיין shape-outside
מגדיר את הצורה של האזור שסביבו התוכן יתגלגל, אבל בלי ה-float לא תראו את ההשפעות של הצורה.
לרכיבים יש אזור צף בצד הנגדי לערך float
שלהם. לדוגמה, אם אובייקט עם תמונה של ספל קפה מרחף שמאלה, אזור הציפה נוצר מימין לספל. אפשר ליצור תמונה עם פערים משני הצדדים, אבל התוכן יתעגל סביב הצורה רק בצד הנגדי שצוין על ידי מאפיין ה-float, ימין או שמאל, אבל אף פעם לא בשניהם.
בעתיד, עם ההשקה של החרגות CSS, תוכלו להשתמש ב-shape-outside
ברכיבים שלא מרחפים.
יצירת צורות באופן ידני
בנוסף לחילוץ צורות מתמונות, אפשר גם לכתוב קוד שלהן באופן ידני. אפשר לבחור מבין כמה ערכים פונקציונליים כדי ליצור צורות: circle()
, ellipse()
, inset()
ו-polygon()
. כל פונקציית צורה מקבלת קבוצת קואורדינטות, והיא מותאמת לתיבת עזר שמגדירה את מערכת הקואורדינטות. בקרוב נסביר על תיבות העזר.
הפונקציה circle()

הסימון המלא של ערך של צורה עגולה הוא circle(r at cx cy)
, כאשר r
הוא הרדיוס של המעגל, ו-cx
ו-cy
הן הקואורדינטות של מרכז המעגל בציר X ובציר Y. הקואורדינטות של מרכז המעגל הן אופציונליות. אם משמיטים אותם, המערכת תשתמש במרכז הרכיב (הצטלבות הקווים האופקיים והאלכסוניים שלו) כברירת מחדל.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
בדוגמה שלמעלה, התוכן יהיה כרוך סביב החלק החיצוני של נתיב עגול. הארגומנט היחיד 50%
מציין את רדיוס המעגל, שבמקרה הספציפי הזה שווה לחצי מהרוחב או מהגובה של הרכיב. שינוי המימדים של האלמנט ישפיע על רדיוס הצורה העגולה. זוהי דוגמה בסיסית לאופן שבו אפשר ליצור צורות CSS רספונסיביות.
לפני שנמשיך, חשוב לזכור ש-CSS Shapes משפיע רק על צורת אזור הציפה סביב רכיב. אם לאלמנט יש רקע, הוא לא ייחתוך על ידי הצורה. כדי להשיג את האפקט הזה, צריך להשתמש במאפיינים של מסכה ב-CSS – clip-path או mask-image. הנכס clip-path
מאוד שימושי כי הוא פועל לפי אותו סימון כמו צורות CSS, כך שאפשר לעשות שימוש חוזר בערכים.

בתמונות שבמסמך הזה נעשה שימוש בקיצוץ כדי להדגיש את הצורה ולעזור לכם להבין את האפקטים.
חזרה לצורת העיגול.
כשמשתמשים באחוזים לחישוב רדיוס המעגל, הערך מחושב בפועל באמצעות נוסחה מורכבת יותר: sqrt(width^2 + height^2) / sqrt(2). חשוב להבין את הנושא הזה כי הוא יעזור לכם לדמיין איך ייראה הצורה של המעגל שייווצר אם המימדים של הרכיב לא יהיו שווים.
אפשר להשתמש בכל סוגי היחידות של CSS בקואורדינטות של פונקציית הצורה – px, em, rem, vw, vh וכו'. אתם יכולים לבחור את האפשרות הכי גמישה או הכי קשיחה שמתאימה לצרכים שלכם.
כדי לשנות את המיקום של העיגול, מגדירים ערכים מפורשים לקווי הרוחב והאורך של מרכז העיגול.
.element{
shape-outside: circle(50% at 0 0);
}
כך ממקמים את מרכז המעגל במקור של מערכת הקואורדינטות. מהי מערכת הקואורדינטות? כאן אנחנו משיקים את תיבות העזר.
תיבות עזרה לצורות ב-CSS
תיבת העזר היא תיבה וירטואלית סביב הרכיב, שמגדירה את מערכת הקואורדינטות שמשמשת לציור ולמיקום של הצורה. מקור מערכת הקואורדינטות נמצא בפינה השמאלית העליונה שלה, כאשר ציר X מצביע ימינה וציר Y מצביע למטה.

חשוב לזכור ש-shape-outside
משנה את הצורה של אזור הציפה שאליו התוכן יתגלגל. אזור הציפה משתרע עד לקצוות החיצוניים של התיבה שמוגדרת על ידי המאפיין margin
. התיבה הזו נקראת margin-box
והיא תיבה שמוגדרת כברירת מחדל לצורך הפניה לצורה, אם לא צוינה תיבת הפניה אחרת.
שתי ההצהרות הבאות ב-CSS מניבות תוצאות זהות:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
עדיין לא הגדרנו שוליים לרכיב. בשלב הזה אפשר להניח שהמקור של מערכת הקואורדינטות והמרכז של המעגל נמצאים בפינה הימנית העליונה של אזור התוכן של הרכיב. המצב משתנה כשמגדירים שוליים:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
מקור מערכת הקואורדינטות נמצא עכשיו מחוץ לאזור התוכן של הרכיב (100 פיקסלים למעלה ו-100 פיקסלים שמאלה), וכך גם מרכז המעגל. הערך המחושב של רדיוס המעגל גדל גם הוא כדי להביא בחשבון את השטח המוגדל של מערכת הקואורדינטות שנוצרה על ידי תיבת העזרה margin-box
.


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

אליפסות נראות כמו מעגלים דחוסים. הם מוגדרים כ-ellipse(rx ry at cx cy)
, כאשר rx
ו-ry
הם הרדיוס של האליפסה בציר X ובציר Y, ו-cx
ו-cy
הן הקואורדינטות של מרכז האליפסה.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
ערכי האחוזים יחושבו מהמאפיינים של מערכת הקואורדינטות. אין צורך בחשבון מתוחכם. אפשר להשמיט את הקואורדינטות של מרכז האליפסה, והן ישוחזרו ממרכז מערכת הקואורדינטות.
אפשר גם להגדיר את הרדיוס בצירים X ו-Y באמצעות מילות מפתח: הערך farthest-side
מניב רדיוס שווה למרחק בין מרכז האובליסק לצד של תיבת העזר הרחוק ממנו ביותר, ואילו הערך closest-side
מניב את הערך ההפוך – המרחק הקצר ביותר בין המרכז לצד.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
האפשרות הזו שימושית כשהמידות של הרכיב (או של תיבת העזר) עשויות להשתנות באופן בלתי צפוי, אבל רוצים שצורת האליפסה תתאים את עצמה.
אפשר להשתמש באותן מילות מפתח farthest-side
ו-closest-side
גם לקוטר בפונקציית הצורה circle()
.
הפונקציה polygon()

אם עיגולים ואליפסות מגבילים מדי, פונקציית הצורה של פוליגון פותחת עולם של אפשרויות. הפורמט הוא polygon(x1 y1, x2 y2, ...)
, שבו מציינים זוגות של קואורדינטות x ו-y לכל קודקוד (נקודה) של פוליגון. מספר הזוגות המינימלי שצריך לציין כדי לציין פוליגון הוא שלושה, משולש.
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
הקודקודים ממוקמים במערכת הקואורדינטות. בפוליגונים עם תגובה דינמית, אפשר להשתמש בערכי אחוזים לחלק מהקואורדינטות או לכל הקואורדינטות.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
יש פרמטר fill-rule
אופציונלי, מיובא מ-SVG, שמנחה את הדפדפן איך להתייחס ל'פנימיות' של פוליגון במקרה של נתיבים שחופפים לעצמם או צורות סגורות. Joni Trythall מסביר בצורה טובה מאוד איך פועל המאפיין fill-rule ב-SVG. אם לא מגדירים את fill-rule
, ערך ברירת המחדל שלו הוא nonzero
.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
הפונקציה inset()
פונקציית הצורה inset()
מאפשרת ליצור צורות מלבניות שתוכלו לעטוף בהן תוכן. זה אולי נשמע לא הגיוני, בהתחשב בהנחה הראשונית שלפיה CSS Shapes משחרר תוכן אינטרנט מתיבתות פשוטות. יכול להיות מאוד. עדיין לא מצאתי תרחיש לדוגמה ל-inset()
שלא ניתן להשיג באמצעות רכיבי float ורכיבי שוליים או באמצעות polygon()
. עם זאת, inset()
מספק ביטוי קריא יותר לצורות מלבניות מאשר polygon()
.
הסימון המלא של פונקציית צורה מוכנסת הוא inset(top right bottom left border-radius)
. ארבעת הארגומנטים הראשונים של המיקום הם סטיות פנימה מהקצוות של הרכיב. הארגומנט האחרון הוא רדיוס הגבול של הצורה המלבנית. השדה הזה הוא אופציונלי, כך שאפשר להשאיר אותו ריק. הוא פועל לפי הסימון המקוצר border-radius
שכבר משתמשים בו ב-CSS.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
יצירת צורות מתיבת עזר
אם לא מציינים פונקציית צורה למאפיין shape-outside
, אפשר לאפשר לדפדפן להסיק צורה מתיבת העזר של הרכיב. תיבת העזרה שמוגדרת כברירת מחדל היא margin-box
. עד עכשיו לא קרה שום דבר יוצא דופן, זה כבר האופן שבו פועלים פלוטורים. אבל כשמשתמשים בשיטה הזו, אפשר לעשות שימוש חוזר בגיאומטריה של רכיב. נבחן את המאפיין border-radius
.
אם משתמשים בו כדי לעגל את הפינות של רכיב צף, מתקבל אפקט חיתוך, אבל אזור הציפה נשאר מלבני. מוסיפים את shape-outside: border-box
כדי שהתמונה תתכרבל סביב הקווים שנוצרו על ידי border-radius
.

.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
כמובן, אפשר להשתמש בכל תיבות העזרה בדרך הזו. זוהי שימוש נוסף בצורות נגזרות – ציטוטים מוטים.

אפשר ליצור את האפקט של ציטוט מוטעה באמצעות מאפייני float ו-margin בלבד. אבל כדי לעשות זאת, צריך למקם את רכיב הציטוט בעץ ה-HTML בנקודה שבה רוצים להציג אותו.
כך אפשר להשיג את אותו אפקט של ציטוט מוסט עם גמישות נוספת:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
מגדירים באופן מפורש את תיבת העזרה content-box
למערכת הקואורדינטות של הצורה. במקרה כזה, כמות התוכן בציטוטים מגדירה את הצורה שסביבה התוכן החיצוני יתעגל. המאפיין margin-top
משמש כאן כדי למקם (לשנות את המיקום) את קטע הציטוט, ללא קשר למיקום שלו בעץ ה-HTML.
שולי הצורה
תוכלו לראות שעיבוד התוכן סביב צורה יכול לגרום לכך שהוא ייגע באלמנט בצורה קרובה מדי. אפשר להוסיף רווח סביב הצורה באמצעות המאפיין shape-margin
.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
האפקט דומה לאפקט שאתם רגילים לראות כשמשתמשים במאפיין הרגיל margin
, אבל הערך shape-margin
משפיע רק על המרחב סביב הערך shape-outside
. המערכת תוסיף רווח סביב הצורה רק אם יש מקום לכך במערכת הקואורדינטות. לכן, בדוגמה שלמעלה, רדיוס המעגל מוגדר ל-40% ולא ל-50%. אם הרדיוס היה מוגדר ל-50%, המעגל היה תופס את כל המרחב במערכת הקואורדינטות ולא היה מקום להשפעה של shape-margin
. חשוב לזכור שהצורה מוגבלת בסופו של דבר ל-margin-box
של הרכיב (הרכיב ו-margin
שמקיף אותו). אם הצורה גדולה יותר ומגיעה מעבר ל-margin-box
, היא תוחתוך ל-margin-box
ותקבלו צורה מלבנית.
חשוב להבין שאפשר להזין ב-shape-margin
רק ערך חיובי אחד. אין לו סימון בכתב יד ארוך. מהו shape-margin-top של עיגול?
אנימציה של צורות
אפשר לשלב צורות CSS עם תכונות CSS רבות אחרות, כמו מעברים והנפשות. עם זאת, חשוב להדגיש שמשתמשים מתרגזים מאוד כשפריסת הטקסט משתנה בזמן הקריאה. אם תחליטו להוסיף אנימציה לצורות, חשוב לשים לב היטב לחוויית השימוש.
אפשר להוסיף אנימציה לרדיוס ולמרכז של הצורות circle()
ו-ellipse()
, כל עוד הם מוגדרים בערכים שהדפדפן יכול לבצע בהם אינטרפולציה. אפשר לעבור מ-circle(30%)
אל circle(50%)
. עם זאת, אנימציה בין circle(closest-side)
ל-circle(farthest-side)
תגרום ללחץ על הדפדפן.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}

אפשר ליצור אפקטים מעניינים יותר כשמפעילים אנימציה של צורות polygon()
. חשוב לזכור שלפוליגון צריך להיות אותו מספר קודקודים בשני מצבי האנימציה. הדפדפן לא יכול לבצע אינטרפולציה אם מוסיפים או מסירים קודקודים.
טיפ אחד הוא להוסיף את מספר הנקודות הגבוה ביותר שדרוש לכם ולמקם אותן בצבירה יחד במצב האנימציה שבו אתם רוצים פחות קצוות גלויים בצורך.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

הכנסת תוכן לתוך צורה

טיוטת המפרט הראשונית של צורות CSS כללה את המאפיין shape-inside
, שמאפשר לעטוף תוכן בתוך צורה. במשך זמן מה היו הטמעות גם ב-Chrome וגם ב-WebKit. עם זאת, כדי לעטוף תוכן שממוקם באופן שרירותי בתוך נתיב מותאם אישית, נדרשים הרבה יותר מאמץ ומחקר כדי לכסות את כל התרחישים האפשריים ולהימנע מבאגים. לכן העברנו את הנכס shape-inside
לצורות CSS ברמה 2 והסרתנו את ההטמעות שלו.
עם זאת, בעזרת קצת מאמץ ופשרה מסוימת, עדיין אפשר ליצור את האפקט של גלישת תוכן בתוך צורה מותאמת אישית. הטריק הוא להשתמש בשני רכיבים צפים עם shape-outside
, שממוקמים בצדדים מנוגדים של קונטיינר. הפשרה היא שצריך להשתמש ברכיב אחד או שניים ריקים שאין להם משמעות סמנטית, אבל הם משמשים כעמודים כדי ליצור את האשליה של צורה בתוך התמונה.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
המיקום של רכיבי התמיכה .left-shape
ו-.right-shape
בחלק העליון של הקונטיינר חשוב, כי הם יוצגו בצד שמאל ובצד ימין כדי להקיף את התוכן.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}

בעזרת סגנון כזה, שתי התומכות הצפות תופסות את כל המרחב בתוך הרכיב, אבל המאפיינים shape-outside
יוצרים מקום לשאר התוכן.
אם הדפדפן לא תומך ב-CSS Shapes, כל התוכן יוסט למטה ויגרום לאפקטים מכוערים. לכן חשוב להשתמש בתכונה באופן משופר ומתקדם יותר.
בדוגמאות הקודמות לאנימציית צורות, ניתן לראות שטקסט שזז יכול להיות מטריד. לא כל התרחישים לדוגמה מחייבים שימוש בצורה מונפשת. עם זאת, אפשר להוסיף אנימציה למאפיינים אחרים שמקיימים אינטראקציה עם צורות CSS כדי להוסיף אפקטים במקומות שבהם זה הגיוני.
בהדגמה של אליס בארץ הפלאות של צורות CSS, השתמשנו במיקום הגלילה כדי לשנות את השוליים העליונים של התוכן. הטקסט נדחס בין שני אלמנטים צפים. כשהיא נעה למטה, היא צריכה לבצע סידור מחדש בהתאם ל-shape-outside
של שני הרכיבים הצפים. כך נוצרת התחושה שהטקסט נכנס לבור עכברים, והוא מוסיף לחוויית הסיפור. תוכן גבולי ללא צורך? אולי. אבל זה נראה מגניב.
מכיוון שהדפדפן מבצע את הפריסה של הטקסט באופן מקורי, הביצועים טובים יותר מאשר בפתרון באמצעות JavaScript. עם זאת, שינוי של margin-top בזמן גלילה גורם להפעלה של הרבה אירועי פריסה מחדש ואירועי צביעה, וזה עלול להוביל לירידה משמעותית בביצועים. חשוב להשתמש בזהירות! עם זאת, שימוש בצורות CSS בלי להוסיף להן אנימציה לא גורם לירידה משמעותית בביצועים.
שיפור הדרגתי
מתחילים מנקודת הנחה שהדפדפן לא תומך ב-CSS Shapes, וממשיכים ממנה כשאתם מזהים את התכונה. Modernizr הוא פתרון טוב לזיהוי תכונות, ויש בדיקה של צורות CSS בקטע 'זיהוי תכונות שאינן ליבה'.
בדפדפנים מסוימים יש זיהוי תכונות ב-CSS באמצעות הכלל @supports
, בלי צורך בספריות חיצוניות. דפדפן Google Chrome, שתומך גם ב-CSS Shapes, מבין את הכלל @supports
. כך משתמשים בו כדי לשפר בהדרגה:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
Lea Verou כתבה מידע נוסף על אופן השימוש בכלל @supports ב-CSS.
הסרת עמימות באמצעות החרגות CSS
מה שאנחנו מכירים היום בתור צורות CSS, נקרא בעבר 'חרגות וצורות CSS' בימים הראשונים של המפרט. השינוי בשם עשוי להיראות כניואנסים, אבל הוא חשוב מאוד. החרגות CSS, שקיימות עכשיו כמפרט נפרד, מאפשרות לעטוף תוכן סביב אלמנטים שממוקמים באופן שרירותי, בלי צורך במאפיין float. דמיינו שרוצים לעטוף תוכן סביב רכיב שממוקם באופן מוחלט. זהו תרחיש לדוגמה לשימוש בהחרגות CSS. צורות CSS מגדירות רק את הנתיב שבו התוכן יתכרך.
לכן, צורות והחרגות הן לא אותו הדבר, אבל הן משלימים זו את זו. צורות CSS זמינות בדפדפנים היום, אבל החרגות CSS עדיין לא מוטמעות עם אינטראקציה של צורות.
כלים לעבודה עם צורות CSS
אפשר ליצור נתיבים בכלים קלאסיים ליצירת תמונות, אבל אף אחד מהם, נכון למועד כתיבת המאמר הזה, לא מייצא את התחביר הנדרש לערכים של CSS Shapes. גם אם כן, עבודה כזו לא תהיה מעשית במיוחד.
צורות CSS מיועדות לשימוש בדפדפן, שבו הן מגיבות לאלמנטים אחרים בדף. כדאי מאוד לראות את ההשפעה של עריכת הצורה על התוכן שמקיף אותה. יש כמה כלים שיעזרו לכם בתהליך העבודה הזה:
Brackets: התוסף CSS Shapes Editor ל-Brackets משתמש במצב התצוגה המקדימה בזמן אמת של עורך הקוד כדי להציג שכבה של עורך אינטראקטיבי לעריכת ערכי הצורות.
Google Chrome: התוסף CSS Shapes Editor ל-Google Chrome מרחיב את הכלים למפתחים בדפדפן עם אמצעי בקרה ליצירה ולעריכה של צורות. המערכת תציב עורך אינטראקטיבי מעל הרכיב שנבחר.
בכלי הניפוי ב-Google Chrome יש תמיכה מובנית בהדגשת צורות. מעבירים את העכבר מעל רכיב עם מאפיין shape-outside
והוא יידלק כדי להמחיש את הצורה.
צורות מתמונות: אם אתם מעדיפים ליצור תמונות ולאפשר לדפדפן לחלץ מהן צורות, Rebecca Hauck כתבה מדריך טוב ל-Photoshop.
Polyfill: Google Chrome הוא הדפדפן הראשי הראשון שמציע את CSS Shapes. בקרוב תהיה תמיכה בתכונה ב-iOS 8 וב-Safari 8 של Apple. יצרני דפדפנים אחרים עשויים להביא זאת בחשבון בעתיד. עד אז, יש polyfill של CSS Shapes שיספק תמיכה בסיסית.
סיכום
באינטרנט שבו התוכן נמצא בדרך כלל בקופסאות פשוטות, צורות CSS מספקות דרך ליצור פריסה דרמטית, וסוגרות את הפער באיכות בין עיצוב לאינטרנט לעיצוב להדפסה. כמובן, אפשר להשתמש בצורות בצורה לא נכונה וליצור הסחות דעת. עם זאת, אם משתמשים בצורות עם טעם ועם שיקול דעת, הן יכולות לשפר את הצגת התוכן ולרכז את תשומת הלב של המשתמש בדרך ייחודית לו.
רציתי להשאיר לכם אוסף של עבודות של יוצרים אחרים, בעיקר מהדפסה, שממחישות שימושים מעניינים בפריסה לא ריבועית. אני מקווה שהמידע הזה יניע אתכם לנסות את CSS Shapes ולנסות רעיונות עיצוב חדשים.
תודה רבה ל-Pearl Chen, Alan Stearns ו-Zoltan Horvath על בדיקת המאמר הזה ועל התובנות החשובות שסיפקתם.