Cum se creează margini înclinate cu CSS
În acest post, vom examina modul în care putem crea un efect de margine înclinat (orizontal) pe o pagină web. Practic, arata cam asa:
Având o margine ușor înclinată ar trebui să ne facă aspectul web mai puțin rigid și plicticos. Pentru a face acest truc, vom folosi pseudo-elementele ::inainte de și ::după și Transformarea CSS3.
Utilizarea elementelor Pseudo
Această tehnică folosește pseudoelementele ::inainte de și ::după pentru a regla marginile elementului. În acest exemplu, vom regla marginea inferioară.
.bloc height: 400px; lățime: 100%; poziția: relativă; fundal: gradient liniar (la dreapta, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: după conținut: "; lățimea: 100%; înălțimea: 100%; poziția: absolută; fundal: inherit; z-index: -1; (3deg);
Să recapitulăm.
transformare origine specifică coordonatele elementului pe care dorim să îl transformăm. În exemplul de mai sus am specificat stânga jos care va pune coordonatele de pornire pe partea stângă a blocului.
transform: skewY (3deg); face ::după bloc de oblic sau unghi la 3 grade. Deoarece am specificat coordonatele de pornire ca în partea de jos din stânga, dreapta-jos a blocului ridică 3 grade. Dacă vom schimba transformare origine la dreapta jos iar colțul din stânga jos va fi ridicat cu 3 grade în schimb.
Puteți adăuga un fundal sau un gradient de culoare solidă pentru a vedea rezultatul.
Faceți-o mai ușoară cu Sass Mixin
Pentru a face acest lucru mai ușor, am creat un amestec Sass pentru a adăuga marginile înclinate, minus durerile de cap de la tratarea complexității regulilor de stil. Cu următorul mixin puteți specifica rapid partea laterală - sus-dreapta, sus-dreapta, partea de jos stânga sau dreapta-jos - pentru a înclina.
@mixin unghi-margine ($ pos-top: null, $ unghi-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; poziția: relativă; fundal: gradient liniar (la dreapta, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: înainte și după :: după conținut: "; lățime: 100%; înălțime: 100%; poziția: absolută; fundal: inherit; z-index: -1; pos-top & :: inainte de @if $ pos-top == 'topleft' top: 0; transformare-origine: dreapta sus; transformare: skewY ($ angle-top) = "topright" top: 0; transformare-origine: stânga sus; transformare: skewY (- unghiul de sus); @if $ pos-btm & :: după @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: bottom right; transform: skewY (- angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transformă: skewY ($ angle-btm);
Există patru variabile în mixin. Primele două variabile, $ Pos-top și $ Unghi-top, specifică top coordonate de pornire si grad. Ultimele două variabile specifică coordona si grad pentru fund latură.
Dacă completați toate cele patru variabile, puteți înclina ambele părți - partea de sus și de jos - a elementului.
Folosiți Sass @include sintaxă pentru a introduce mixinul într-un element. Puteți vedea exemplele de mai jos:
Pentru a adăuga marginea înclinată stânga sus latură:
.bloc @ include marginea unghiulară (topleft, 3deg);
Pentru a adăuga marginea înclinată dreapta-jos latură:
.bloc @ include unghi-margine (bottomright, 3deg);
Pentru a adăuga marginea înclinată stânga sus și dreapta-jos latură:
.bloc @ include marginea unghiulară (topleft, 3deg, bottomright, 3deg);
Mai jos este demo-ul cu amestecurile aplicate. Modificați caseta de selectare pentru a comuta la un alt stil.
Asta e!
