Kako stvoriti iskrivljene rubove s CSS

U ovom postu razmotrit ćemo kako možemo stvoriti efekt rubnog ruba (vodoravno) na web stranici. Uglavnom, izgleda nešto ovako:

Imati lagano zakrivljeni rub trebao bi izgledati manje kruto i dosadno. Da bismo napravili ovaj trik, koristit ćemo pseudo-elementi ::prije i ::nakon i CSS3 Transform.

Korištenje pseudo elemenata

Ova tehnika koristi pseudo-elemente ::prije i ::nakon za ugađanje rubova elemenata. U ovom primjeru podešavamo donji rub.

 .blok visina: 400px; širina: 100%; pozicija: relativna; pozadina: linearni gradijent (desno, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); širina: 100%; visina: 100%; pozicija: apsolutna; pozadina: naslijediti; z-indeks: -1; dno: 0; izvor transformacije: lijevo dno, transformirati: skewY (3deg); 

Recap.

transformirati-podrijetlo određuje koordinate elementa koji želimo transformirati. U gornjem primjeru smo naveli lijevo dolje koji će staviti početne koordinate na donju lijevu stranu bloka.

transformacija: skewY (3deg); čini ::nakon blokirati kosu ili kut na 3 stupnja. Budući da smo odredili početnu koordinatu kao donje lijevo, donji desni dio bloka podiže 3 stupnja. Ako zamijenimo transformirati-podrijetlo do desno dolje a donji lijevi kut će biti podignut umjesto 3 stupnja.

Da biste vidjeli rezultat, možete dodati jednobojnu pozadinu ili gradijent.

Učinite to lakšim uz Sass Mixin

Da bi to bilo lakše, stvorio sam Sass mixin kako bih dodao nagnute rubove, bez glavobolje zbog rješavanja složenosti stilskih pravila. Pomoću sljedećeg miksa možete brzo odrediti stranu - gore-lijevo, gore desno, dno-lijevo ili dno-desno - za nakošenje.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) širina: 100%; pozicija: relativna; pozadina: linearni gradijent (desno, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: prije, i :: nakon content: "; širina: 100%; visina: 100%; pozicija: apsolutna; pozadina: naslijediti; z-indeks: -1; prijelaz: olakšati sve .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' vrh: 0; transform-origin: desni vrh; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: lijevi vrh; transformacija: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: desno dno; transformacija: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' (dolje: 0; transform-origin: lijevo dno; transform: skewY ($ angle-btm); 

U miksinu postoje četiri varijable. Prve dvije varijable, $ Poz-top i $ Kut-top, odredite gornja početna koordinata i stupanj. Posljednje dvije varijable određuju Koordinirati i stupanj za dno strana.

Ako popunite sve četiri varijable, možete nagnuti obje strane - vrh i dno elementa.

Koristite Sass @include sintaksa za umetanje mixina u element. Primjere možete vidjeti u nastavku:

Za dodavanje iskrivljenog ruba gore lijevo strana:

 .blok @ uključi rub ruba (topleft, 3deg);  

Za dodavanje iskrivljenog ruba dolje desno strana:

 .blok @ uključi rub ruba (dolje, desno, 3deg);  

Za dodavanje iskrivljenog ruba gore lijevo i dolje desno strana:

 .blok @ uključi kut-rub (topleft, 3deg, bottomright, 3deg);  

Ispod se nalazi demo s primijenjenim miksinima. Promijenite okvir za odabir kako biste se prebacili na drugi stil.

To je to!