יצירת אלכסון פונקציונלי באתר

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

יש לקחת את האזור התחתון מבין ה-2 ולהצמיד לו Class של diagonalcutc1 ואת הקוד הבא:

.diagonalcutc1 {
 -webkit-clip-path: polygon(0 30%, 0 100%, 100% 100%, 100% 0);
 margin-top:-120px;
}

כאשר שיפוע האלכסון מוגדר ע"י הירידה (30%) – כך אלכסון קטן יהיה 10% ואלכסון ענק יהיה 50% (צריך להתאים את ה-margin-top בהתאם).

כדי לבצע אלכסון פונקציונלי דו-צידי באתר, יש להשתמש בקוד הבא:

.diagonalcutc1 {
 -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
 margin-top:-150px;
    z-index:3;
}

כאשר השיפועים מוגדרים ע"י ה-30% וה-70% בהתאמה. (סכום צריך להיות 100% כדי שיהיו מקבילים)

ולבסוף, קוד לביצוע אלכסון פונקציונלי דו-צידי עם שיפועים בכיוונים שונים, הקוד הבא:

.diagonalcutc1 {
 -webkit-clip-path: polygon(0 30%, 0 70%, 100% 100%, 100% 0);
 margin-top:-120px;
z-index: 3;
}

כאשר מפעילים אלכסון דו-צידי, חייבים לעשות Slideup לאזור הבא בתור אחרי האלכסון. (הרמה ושינוי ה-z-index) לדוגמא:

.slideup120 {
 margin-top:-120px;
}

לביצוע אלכסונים וחיתוכים מתוחכמים ומתקדמים יותר – ניתן להשתמש בכלי הזה: CSS Clip Mask Generator – Clippy.

רפרנס:
https://stackoverflow.com/questions/29259935/cutting-image-diagonally-with-css