Ako vytvoriť skosené hrany pomocou

V tomto príspevku sa pozrieme na to, ako môžeme na webovej stránke vytvoriť efekt šikmého okraja (horizontálne). V podstate to vyzerá takto:

S mierne zaobleným okrajom by malo naše rozloženie webu vyzerať menej tuhé a nudné. Ak chcete urobiť tento trik, budeme používať pseudo-elementy :: predtým a :: po a Transformácia CSS3.

Používanie Pseudo Elements

Táto technika používa pseudoelementy :: predtým a :: po na zachytenie okrajov prvkov. V tomto príklade nastavíme spodný okraj.

 .blok výška: 400px; šírka: 100%; pozícia: relatívna; pozadie: lineárny gradient (vpravo, rgba (241, 231, 103,1) 0%, rgba (254,182,69,1) 100%);  .block :: po obsah: "; šírka: 100%; výška: 100%; pozícia: absolútna; pozadia: inherit; z-index: -1; (3deg); 

Pozrime sa.

transformácie-origin špecifikuje súradnice elementu, ktorý chceme transformovať. V vyššie uvedenom príklade sme špecifikovali vľavo dole ktorý umiestni súradnice štartovania na ľavú dolnú časť bloku.

transformácia: skewY (3deg); urobí :: po blokovať skosenie alebo uhol o 3 stupne. Keďže sme určili začiatočnú súradnicu ako spodnú ľavú stranu, pravý dolný okraj bloku sa zvýši o 3 stupne. Ak vymeníme transformácie-origin na vpravo dole a ľavý dolný roh sa zvýši o 3 stupne.

Ak chcete zobraziť výsledok, môžete pridať plné farebné pozadie alebo gradient.

Uľahčite to pomocou služby Sass Mixin

Aby som to uľahčil, vytvoril som Sass mixin a pridal som šikmé okraje, mínus bolesti hlavy, ktoré sa zaoberali komplexnosťou pravidiel štýlu. S nasledujúcim mixinom môžete rýchlo zadať bočný horný - ľavý, pravý - pravý, spodný - alebo spodný - pravý.

 @mixin uhol-hrana ($ pos-top: null, $ uhol-top: null, $ pos-btm: null, $ angle-btm: null) šírka: 100%; pozícia: relatívna; pozadie: lineárny gradient (vpravo, rgba (241, 231, 103,1) 0%, rgba (254,182,69,1) 100%); & :: pred, & :: po obsah: "; šírka: 100%; výška: 100%; pozícia: absolútna; pozadia: inherit; z-index: -1; pos-top & :: pred @if $ pos-top == 'topleft' top: 0; transform-origin: right top; transforma: skewY ($ angle-top) = 'topright' top: 0; transform-origin: left top; transformácia: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transforma: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transformovať: skewY ($ angle-btm); 

V zmesi sú štyri premenné. Prvé dve premenné, $ Pos-top a $ Uhol-top, špecifikujte horná počiatočná súradnica a stupeň. Posledné dve premenné špecifikujú koordinovať a stupeň pre dno bočné.

Ak vyplníte všetky štyri premenné, môžete nakloniť obe strany - hornú a spodnú časť - prvku.

Použite Sass @include syntax vložiť mixin do prvku. Môžete vidieť príklady nižšie:

Ak chcete pridať skosený okraj hore v ľavo side:

 .blok @ zahŕňa uhlové okraje (topleft, 3deg);  

Ak chcete pridať skosený okraj vpravo dole side:

 .blok @ zahŕňa uhlové okraje (bottomright, 3deg);  

Ak chcete pridať skosený okraj hore v ľavo a vpravo dole side:

 .blok @ zahŕňa uhol-okraj (topleft, 3deg, bottomright, 3deg);  

Nižšie uvádzame demo s použitými zmesami. Zmeňte pole výberu na prepínanie na iný štýl.

To je všetko!