Kā izveidot šķautas malas ar CSS

Šajā ziņojumā mēs skatīsimies, kā mēs varam izveidot leņķa malas efektu (horizontāli) tīmekļa lapā. Būtībā tas izskatās šādi:

Ar nelielu leņķa malu vajadzētu padarīt mūsu tīmekļa izkārtojumu mazāk stingru un blāvu. Lai to izdarītu, mēs izmantosim pseidoelementi :: pirms un :: pēc un CSS3 transformācija.

Pseido elementu izmantošana

Šī metode izmanto pseidoelementus :: pirms un :: pēc leņķis elementa malām. Šajā piemērā mēs pielāgosim apakšējo malu.

 .bloks augstums: 400px; platums: 100%; pozīcija: relatīvais; fons: lineārais gradients (pa labi, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .bloks :: pēc saturs: ", platums: 100%, augstums: 100%, stāvoklis: absolūts, fons: mantojums, z-indekss: -1, apakšā: 0, transformācijas izcelsme: kreisā apakšējā daļa, transformācija: skewY (3deg); 

Atcerēsimies.

The pārveidot norāda elementa, kuru mēs vēlamies pārveidot, koordinātas. Iepriekš minētajā piemērā mēs norādījām kreisajā apakšējā daļā kas sākas koordinātas kreisajā kreisajā pusē.

The pārveidot: skewY (3deg); padara :: pēc bloka šķībs vai leņķis 3 grādos. Tā kā sākuma koordinātu norādījām kā apakšējo kreiso pusi, bloka apakšējā labajā stūrī ir 3 grādi. Ja mēs mainām pārveidot uz labajā apakšējā daļā un apakšējais kreisais stūris tiks paaugstināts par 3 grādiem.

Lai redzētu rezultātu, varat pievienot vienkrāsainu fonu vai gradientu.

Padariet to vieglāku ar Sass Mixin

Lai to padarītu vieglāku, esmu izveidojis Sass mixin, lai pievienotu leņķveida malas, atskaitot galvassāpes no stila noteikumu sarežģītības. Ar šādu kombināciju jūs varat ātri norādīt pusi - augšējo, kreiso, augšējo, apakšējo vai apakšējo labo pusi.

 @mixin leņķa mala ($ pos-top: null, $ leņķis-top: null, $ pos-btm: null, $ angle-btm: null) platums: 100%; pozīcija: relatīvais; fons: lineārais gradients (pa labi, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: pēc saturs: "; platums: 100%; augstums: 100%; stāvoklis: absolūts; fons: mantojums; z-indekss: -1; pāreja: atvieglot visus .5s; @if $ pos-top & :: pirms @if $ pos-top == 'augšējā daļa (augšā: 0; pārveidot izcelsmi: labajā augšpusē; pārveidot: skewY ($ leņķis-top); @if $ pos-top = = 'topright' top: 0; pārveidot izcelsmi: kreisais tops; pārveidot: skewY (- $ leņķis-top); @if $ pos-btm & :: pēc @if $ pos-btm == 'bottomleft' apakšā: 0; pārveidot izcelsmi: labajā apakšā; pārveidot: skewY (- $ leņķis-btm); @if $ pos-btm == 'bottomright' apakšā: 0; transformācijas izcelsme: pa kreisi; pārveidot: skewY ($ angle-btm); 

Maisījumā ir četri mainīgie. Pirmie divi mainīgie, $ pos-top un $ leņķis, norādiet sākuma koordinātes un grāds. Pēdējie divi mainīgie norāda koordinēt un grāds priekš apakšā pusē.

Ja jūs aizpildāt visus četrus mainīgos, jūs varat nobīdīt abas puses - augšējo un apakšējo - elementu.

Izmantojiet Sass @ ietveriet sintakse, lai ievietotu maisījumu elementam. Jūs varat redzēt tālāk minētos piemērus:

Lai pievienotu izliektu malu augšējais kreisais pusē:

 .bloks @ ietveriet leņķa malu (augšpuse, 3deg);  

Lai pievienotu izliektu malu apakšējā labajā stūrī pusē:

 .bloks @ ietveriet leņķa malu (bottomright, 3deg);  

Lai pievienotu izliektu malu augšējais kreisais un apakšējā labajā stūrī pusē:

 .bloks @ ietveriet leņķa malu (augšpuse, 3deg, apakšējā stūra, 3deg);  

Zemāk ir demonstrācija ar pielietotajiem maisījumiem. Mainiet izvēles lodziņu, lai pārslēgtos uz citu stilu.

Tieši tā!