Hogyan lehet létrehozni a ferde éleket a CSS segítségével

Ebben a bejegyzésben megnézzük, hogyan hozhatunk létre egy szögletes élhatást (vízszintesen) egy weblapon. Alapvetően ez így néz ki:

Az enyhén szögletes élnek köszönhetően a webes elrendezés kevésbé merev és unalmas lesz. Ehhez a trükköt használjuk pszeudo-elemek ::előtt és ::után és CSS3 átalakítás.

Pseudo elemek használata

Ez a technika a pszeudoelemeket használja ::előtt és ::után az elem széleinek szöge. Ebben a példában az alsó széle lesz beállítva.

 .blokk magasság: 400px; szélesség: 100%; pozíció: relatív; háttér: lineáris gradiens (jobbra, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: után tartalom: ", szélesség: 100%, magasság: 100%, pozíció: abszolút, háttér: öröklés, z-index: -1, alsó: 0, transzformáció-eredet: bal alsó, átalakítás: skewY (3deg); 

Nézzük vissza!.

A transzformációs származási meghatározza az átalakítani kívánt elem koordinátáit. A fenti példában meghatároztuk bal alsó amely a kezdő koordinátákat a blokk bal alsó oldalára helyezi.

A transzformáció: skewY (3deg); teszi ::után blokk ferde vagy szög 3 fok. Mivel a kezdő koordinátát bal alsó részként adtuk meg, a blokk jobb alsó része 3 fokot emel. Ha kicseréljük a transzformációs származási nak nek jobb alsó és a bal alsó sarok 3 fokot emel.

Az eredmény megjelenítéséhez szilárd színt vagy színátmenetet adhat hozzá.

Legyen könnyebb a Sass Mixinnel

Ennek megkönnyítése érdekében létrehoztam egy Sass mixint, hogy hozzáadjam a szögletes éleket, kivéve a fejfájást a stílusszabályok bonyolultsága miatt. A következő keverékkel gyorsan megadhatja az oldalt - bal felső, jobb felső, bal alsó vagy jobb alsó -, hogy ferde.

 @mixin szögszél ($ pos-top: null, $ szög-top: null, $ pos-btm: null, $ szög-btm: null) szélesség: 100%; pozíció: relatív; háttér: lineáris gradiens (jobbra, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: után tartalom: ", szélesség: 100%, magasság: 100%, pozíció: abszolút, háttér: öröklés, z-index: -1, átmenet: minden .5s; pos-top & :: előtti @if $ pos-top == 'csúcsfutás top: 0; transzformációs eredet: jobb felső; transzformáció: skewY ($ szög-top); @if $ pos-top = = 'topright' top: 0; transzformációs eredet: bal felső; transzformáció: skewY (- $ szög-top); @if $ pos-btm & :: után @if $ pos-btm == 'bottomleft' alsó: 0; transzformációs eredet: jobb alsó; transzformáció: skewY (- $ szög-btm); @if $ pos-btm == 'bottomright' alsó: 0; transzformációs eredet: bal alsó; átalakítás: skewY ($ angle-btm); 

Négy változó van a mixinben. Az első két változó, $ Pos-top és $ Szög-top, adja meg a top kezdő koordináta és a fokozat. Az utóbbi két változó a koordináta és a fokozat a alsó oldal.

Ha kitölti a négy változót, akkor az elem mindkét oldalát - a felső és az alsó - szögezheti.

Használja a Sass-ot @include szintaxis a mixin egy elemhez való beillesztéséhez. Az alábbi példákat láthatja:

A ferde él hozzáadásához bal felső oldal:

 .blokk @befogadja a szögszöget (dőlésszög, 3deg);  

A ferde él hozzáadásához jobb alsó oldal:

 .blokk @include szögszög (bottomright, 3deg);  

A ferde él hozzáadásához bal felső és jobb alsó oldal:

 .blokk @befogadja a szögszöget (csúcs, 3deg, alsó, 3deg);  

Az alábbiakban bemutatjuk a demókat a használt mixinekkel. Változtassa meg a jelölőnégyzetet egy másik stílusra váltáshoz.

Ez az!