Miten luodaan vinoja reunoja CSS n avulla

Tässä viestissä tarkastelemme, miten voimme luoda kulmaisen reunavaikutuksen (vaakasuoraan) verkkosivulla. Periaatteessa se näyttää tältä:

Pienellä kulmalla varustetun reunan pitäisi tehdä web-ulkoasusta vähemmän jäykkä ja tylsä. Tehdäksesi tämän tempun, käytämme pseudo-elementit ::ennen ja ::jälkeen ja CSS3-muunnos.

Pseudoelementtien käyttäminen

Tämä tekniikka käyttää pseudoelementtejä ::ennen ja ::jälkeen kulmassa elementin reunoja. Tässä esimerkissä säädämme alareunaa.

 .lohko korkeus: 400px; leveys: 100%; asema: suhteellinen; tausta: lineaarinen gradientti (oikealle, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: jälkeen sisältö: ", leveys: 100%, korkeus: 100%, sijainti: absoluuttinen, tausta: periä, z-indeksi: -1, pohja: 0, muunnos-alkuperä: vasen pohja, muunnos: skewY (3deg); 

Let's recap.

muunnos-alkuperää määrittää muunnettavan elementin koordinaatit. Yllä olevassa esimerkissä määritimme vasen pohja joka asettaa aloituskoordinaatit lohkon vasempaan alakulmaan.

muunnos: skewY (3deg); tekee ::jälkeen lohkon vinossa tai kulmassa 3 astetta. Koska määritimme aloituskoordinaatin alhaalta vasemmalle, lohkon oikeassa alakulmassa on 3 astetta. Jos vaihdamme muunnos-alkuperää että oikealla pohjalla ja vasemmassa alakulmassa korotetaan 3 astetta.

Voit lisätä tuloksen näkyviin lisäämällä värillisen taustan tai kaltevuuden.

Tee se helpommin Sass Mixinin avulla

Jotta tämä olisi helpompaa, olen luonut Sass-sekoittimen lisäämään kulmaiset reunat miinus päänsärky käsittelemällä tyylisääntöjen monimutkaisuutta. Seuraavan sekoituksen avulla voit nopeasti määrittää sivun - vasen, ylhäältä, vasemmalta tai alhaalta oikealta - vinoon.

 @mixin kulmareuna ($ pos-top: null, $ kulma-top: null, $ pos-btm: null, $ angle-btm: null) leveys: 100%; asema: suhteellinen; tausta: lineaarinen gradientti (oikealle, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: jälkeen sisältö: ", leveys: 100%, korkeus: 100%, sijainti: absoluuttinen, tausta: periä, z-indeksi: -1, siirtymä: helpottaa kaikkia .5s; @if $ pos-top & :: ennen @if $ pos-top == 'ylhäältä päin alkuun: 0; muunnos-alkuperää: oikeassa yläkulmassa; muunnos: skewY ($ kulma-top); @if $ pos-top = = 'topright' top: 0; transform-origin: vasen yläosa; muunnos: skewY (- $ kulma-top); @if $ pos-btm & :: sen jälkeen @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: oikeassa alakulmassa; muunnos: vino (- $ kulma-btm); @if $ pos-btm == 'bottomright' pohja: 0; muunnos-alkuperä: vasen pohja; muunnos: skewY ($ angle-btm); 

Sekoittimessa on neljä muuttujaa. Kaksi ensimmäistä muuttujaa, $ Pos-top ja $ Kulma-top, määritä alkuun koordinaatti ja aste. Jälkimmäiset kaksi muuttujaa määrittävät koordinoida ja aste varten pohja puoli.

Jos täytät kaikki neljä muuttujaa, voit kuljettaa elementin molempia puolia - ylä- ja alaosaa.

Käytä Sassia @sisältää syntaksi, jossa sekoitus asetetaan elementtiin. Näet esimerkkejä alla:

Voit lisätä vinon reunan päälle ylävasen puoli:

 .lohko @ sis. kulmareunan (ylälevy, 3deg);  

Voit lisätä vinon reunan päälle ala oikea puoli:

 .lohko @include angle-edge (bottomright, 3deg);  

Voit lisätä vinon reunan päälle ylävasen ja ala oikea puoli:

 .lohko @ sis. kulmareunan (ylälevy, 3deg, alhaalla, 3deg);  

Alla on demo, jossa on käytetty sekoittimia. Vaihda valintaruutu vaihtaaksesi toiseen tyyliin.

Se siitä!