כיצד ליצור קצוות מוטה עם CSS

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

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

שימוש באלמנטים פסאודו

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

 .חסום גובה: 400px; רוחב: 100%; מקומות קרובים רקע: ליניארי- gradient (מימין, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: after :: content: "; width: 100%; height: 100%; position: מוחלט; background: inherit; z-index: -1; bottom: 0; transform-origin: bottom bottom: transform: skewY (3deg); 

בואו נסכם.

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

ה המרה: skewy (3deg); עושה ::לאחר לחסום את הטיה או את הזווית ב -3 מעלות. מכיוון שציינו את קואורדינטת ההתחלה כשמאל למטה, החלק התחתון של הימנית בבלוק מעלה 3 מעלות. אם נחליף את מקור השינוי ל ימין למטה ואת הפינה השמאלית התחתונה יועלה 3 מעלות במקום.

ניתן להוסיף רקע צבע או שיפוע מוצק כדי לראות את התוצאה.

לעשות את זה קל יותר עם Mix Mix

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

 @mixin זווית קצה ($ pos-top: null, $ זווית הדף: null, $ pos-btm: null, $ זווית btm: null) רוחב: 100%; מקומות קרובים רקע: ליניארי- gradient (מימין, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: :: after content: "; width: 100%; height: 100%; position: מוחלט; background: inherit; z-index: -1; למעלה : $ $ pos-top == 'topleft' top: 0: transform-origin: right top; המרה: skewY ($ angle-top); @if $ pos-top = (= - $ top-top); if $ pos-btm & :: :: after @if $ pos-btm == "bottomleft" bottom: 0; המרה-מקור: תחתית תחתית ימנית, שינוי: (- $ a-btm); if $ pos-btm == 'bottomright' bottom: 0; transform-origin: left bottom; transform: skewY ($ angle-btm); 

ישנם ארבעה משתנים mixin. שני המשתנים הראשונים, $ pos-top ו $ angle-top, ציין את בראש הדף וה תואר. שני המשתנים האחרונים מציינים את לתאם וה תואר בשביל ה בתחתית צד.

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

השתמש Sass @ לכלול תחביר כדי להכניס את mixin אלמנט. תוכל לראות דוגמאות להלן:

כדי להוסיף קצה מוטה שמאלי עליון president you

 .חסום @ כולל קצה זווית (topleft, 3deg);  

כדי להוסיף קצה מוטה למטה מימין president you

 .חסום @ כולל קצה זווית (bottomright, 3deg);  

כדי להוסיף קצה מוטה שמאלי עליון ו למטה מימין president you

 .חסום @ כולל זווית קצה (topleft, 3deg, bottomright, 3deg);  

להלן הדגמה עם mixins להחיל. שנה את תיבת הבחירה כדי לעבור לסגנון אחר.

זהו זה!