Kaip sukurti nelygius kraštus su CSS

Šiame pranešime mes peržiūrėsime, kaip galime sukurti kampinį krašto efektą (horizontaliai) tinklalapyje. Iš esmės tai atrodo taip:

Nedidelio kampo kraštas turėtų padaryti mūsų tinklalapio išdėstymą ne tokį standų ir nuobodu. Norėdami tai padaryti, mes naudosime pseudo elementai :: prieš ir :: po ir CSS3 transformacija.

Pseudo elementų naudojimas

Šis metodas naudoja pseudo elementus :: prieš ir :: po nukreipti elemento kraštus. Šiame pavyzdyje mes nustatysime apatinį kraštą.

 .blokas aukštis: 400px; plotis: 100%; pozicija: santykinis; fonas: tiesinis gradientas (į dešinę, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: po turinys: ", plotis: 100%, aukštis: 100%, padėtis: absoliutus, fonas: paveldėti, z-indeksas: -1, apačioje: 0, transformacija - kairė apačia, transformacija: skewY (3deg); 

Leiskite prisiminti.

The transformuoti nurodo elemento, kurį norime transformuoti, koordinates. Aukščiau pateiktame pavyzdyje kairėje apačioje kad pradinės koordinatės bus įdėtos apatiniame kairiajame bloko krašte.

The transformuoti: skewY (3deg); daro :: po bloko kreivė arba kampas 3 laipsnių kampu. Kadangi pradinę koordinates nurodėme kaip apatinę kairę, bloko apačioje dešinėje yra 3 laipsniai. Jei pakeisime transformuoti į dešinėje apačioje ir apatiniame kairiajame kampe bus padidintas 3 laipsniai.

Jei norite pamatyti rezultatą, galite pridėti vientisos spalvos foną arba gradientą.

Padarykite jį lengviau su „Sass Mixin“

Kad tai būtų lengviau, aš sukūriau „Sass“ mišinį, kad pridėtų kampinius kraštus, atėmus galvos skausmus nuo stiliaus taisyklių sudėtingumo. Su šiais mišiniais galite greitai nurodyti šoną - viršutinį kairįjį, viršutinį dešinį, apatinį kairįjį arba apačią - į dešinę.

 @mixin kampo kraštas ($ pos-top: null, $ kampas-top: null, $ pos-btm: null, $ angle-btm: null) plotis: 100%; pozicija: santykinis; fonas: tiesinis gradientas (į dešinę, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: po turinys: ", plotis: 100%, aukštis: 100%, padėtis: absoliutus, fonas: paveldėti, z-indeksas: -1, perėjimas: palengvinti visus .5s; @if $ pos-top & :: prieš @if $ pos-top == 'viršūnė' (viršuje: 0; transformuoti-kilmė: dešinėje viršuje; transformuoti: skewY ($ kampas į viršų); @if $ pos-top = = 'topright' top: 0; transform-origin: kairė viršuje; transformuoti: skewY (- $ kampas-top); @if $ pos-btm & :: po @if $ pos-btm == 'bottomleft' apačioje: 0; transformuoti-kilmė: dešinysis apačioje; transformuoti: skewY (- $ kampas-btm); @if $ pos-btm == 'bottomright' apačioje: 0; transformuoti-kilmė: kairėje apačioje; transformuoti: skewY ($ angle-btm); 

Mišinyje yra keturi kintamieji. Pirmieji du kintamieji, $ pos-top ir $ kampas, nurodykite aukščiausia pradinė koordinatė ir laipsnis. Pastarieji du kintamieji nurodo koordinuoti ir laipsnis už apačioje pusėje.

Jei užpildysite visus keturis kintamuosius, galite pasukti abiejų pusių - viršutinį ir apatinį - elementą.

Naudokite Sass Įtraukti sintaksė, skirta sumaišyti mišinį į elementą. Žemiau pateikti pavyzdžiai:

Jei norite pridėti įstrižą kraštą viršuje kairėje pusė:

 .blokas @įtraukti kampinį kraštą (viršūnę, 3deg);  

Jei norite pridėti įstrižą kraštą apačioje dešinėje pusė:

 .blokas @įtraukti kampinį kraštą (apačioje, 3deg);  

Jei norite pridėti įstrižą kraštą viršuje kairėje ir apačioje dešinėje pusė:

 .blokas @įtraukti kampinį kraštą (pakraštį, 3deg, apatinę, 3deg);  

Žemiau pateikiamas demo su taikomais mišiniais. Pakeiskite pasirinkimo laukelį, kad pereitumėte į kitą stilių.

Viskas!