Kuidas luua nihutatud servi CSS-iga

Selles postituses vaatame, kuidas me saame luua veebilehe nurgaäärse efekti (horisontaalselt). Põhimõtteliselt tundub see midagi sellist:

Pisut nurga servaga peaks meie veebiplaan olema vähem jäik ja tühi. Selleks, et seda trikki teha, kasutame seda pseudoelemendid :: enne ja :: pärast ja CSS3 teisendus.

Pseudoelementide kasutamine

See meetod kasutab pseudoelemente :: enne ja :: pärast elemendi servade nurk. Selles näites kohandame alumist serva.

 .plokk kõrgus: 400 px; laius: 100%; positsioon: suhteline; taust: lineaarne gradient (paremale, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: pärast sisu: ", laius: 100%, kõrgus: 100%, positsioon: absoluutne, taust: pärida, z-indeks: -1; alt: 0; transform-päritolu: vasakpoolne; (3deg); 

Lähme tagasi.

The teisenduse päritolu täpsustab selle elemendi koordinaadid, mida me tahame muuta. Ülaltoodud näites täpsustasime vasakule mis paneb algsed koordinaadid ploki vasakusse vasakusse serva.

The transform: skewY (3deg); teeb selle :: pärast ploki viltus või nurk 3 kraadi juures. Kuna me määrasime alguskoordinaadi all vasakul, tõuseb ploki paremas allosas 3 kraadi. Kui me vahetame teisenduse päritolu kuni paremal ja vasakus nurgas tõstetakse selle asemel 3 kraadi.

Tulemuse nägemiseks saate lisada värvilise tausta või gradiendi.

Tee see Sass Mixini abil lihtsamaks

Selle lihtsustamiseks olen loonud Sass mixini, et lisada nurkade servad miinus peavalud, mis on seotud stiilieeskirjade keerukusega. Järgneva seguga saate kiiresti määrata külje - üleval vasakul, üleval paremal, alumises või alumises paremas servas.

 @mixin nurgaäär ($ pos-top: null, $ nurk-top: null, $ pos-btm: null, $ nurk-btm: null) laius: 100%; positsioon: suhteline; taust: lineaarne gradient (paremale, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: pärast sisu: ", laius: 100%, kõrgus: 100%, positsioon: absoluutne, taust: pärida, z-indeks: -1, üleminek: leevendab kõiki .5s; @if $ pos-top & :: enne @if $ pos-top == 'ülaltpoolt top: 0; transform-päritolu: parem ülemine; transform: skewY ($ nurk-top); @if $ pos-top = = 'topright' top: 0; transform-origin: vasakul ülal; transform: skewY (- $ nurk-top); @if $ pos-btm & :: pärast @if $ pos-btm == 'bottomleft' bottom: 0; transform-päritolu: parem alt; transform: skewY (- $ nurk-btm); teisendama: skewY ($ angle-btm); 

Mixinis on neli muutujat. Kaks esimest muutujat, $ pos-top ja $ nurk-top, täpsustage alguskoordinaat ja kraad. Viimased kaks muutujat määravad koordinaat ja kraad Selle eest põhja pool.

Kui täidate kõik neli muutujat, saate elemendi mõlema külje - ülemise ja alumise - nurga all.

Kasutage Sassit @include süntaks, et sisestada segmendiks element. Allpool näete näiteid:

Vale serva lisamiseks üleval vasakul pool:

 .plokk @include angle-edge (topleft, 3deg);  

Vale serva lisamiseks paremalt alumine pool:

 .plokk @include angle-edge (alumine nurk), 3deg);  

Vale serva lisamiseks üleval vasakul ja paremalt alumine pool:

 .plokk @keerige nurk (serva, 3deg, alumine, 3deg);  

Allpool on demo koos kasutatud segistitega. Teise stiili ümberlülitamiseks valige valikukast.

See ongi see!