אפשר להשתמש בצבעים מדורגים בעלי צורה חרוטית כדי ליצור אפקטים מעניינים, כמו הדוגמה הזו של גבול יפה.
CodePen הזה, שנוצר על ידי Adam Argyle, ששותף במקור דרך הציוץ הזה ב-Twitter, מראה איך להשתמש בשיפוע conic כדי ליצור גבול.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun השתמש ביצירתיות כדי לפצל את הקוד של Adam ב-CodePen וליצור את CodePen הזה. אם תעבירו את העכבר מעל הרכיב, תוכלו לראות את השינוי בגוון ההדרגתי, בזכות קצת קוד JavaScript שמעדכן מאפיין CSS מותאם אישית שמאחסן את זווית הסיבוב.
בדוגמאות האלה נעשה שימוש בנכס border-image-source
. הנכס הזה מגדיר את קובץ האימג' המקור שמשמש ליצירת גבול של רכיב. כמו במאפיינים אחרים שמקבלים ערך של תמונה, גם כל סוג של שיפוע ב-CSS תקף.
border-image-source
שינוי הדרגתי חרוט