Sådan oprettes skæve kanter med CSS

I dette indlæg skal vi se på, hvordan vi kan skabe en vinklet kant-effekt (vandret) på en webside. Dybest set ser det sådan ud:

At have en let vinklet kant skal gøre vores weblayout udseende mindre stivt og kedeligt. For at gøre dette trick, vil vi bruge pseudo-elementer ::Før og ::efter og CSS3 Transform.

Brug af pseudoelementer

Denne teknik bruger pseudoelementerne ::Før og ::efter for at vinkle elementets kanter. I dette eksempel justerer vi bundkanten.

 .blokke højde: 400px; bredde: 100%; stilling: relativ; baggrund: lineær gradient (til højre, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%);  .block :: efter indhold: "; bredde: 100%; højde: 100%; position: absolut; baggrund: arve; z-indeks: -1; bund: 0; transform-oprindelse: venstre bund; transformere: skewY (3deg); 

Lad os genbruge.

Det transformationsbaseret oprindelse specificerer koordinaterne for det element, vi ønsker at omdanne. I eksemplet ovenfor har vi angivet venstre bund der vil sætte startkoordinaterne på bundens venstre side af blokken.

Det transformere: skewY (3deg); gør ::efter blok skæv eller vinkel ved 3 grader. Da vi har angivet startkoordinatet som bunden til venstre, hæver bundens højre hjørne 3 grader. Hvis vi bytter transformationsbaseret oprindelse til højre bund og nederste venstre hjørne hæves 3 grader i stedet.

Du kan tilføje en solid farve baggrund eller gradient for at se resultatet.

Gør det lettere med Sass Mixin

For at gøre det lettere, har jeg lavet en Sass mixin for at tilføje de vinklede kanter, minus hovedpine fra at håndtere kompleksiteten af ​​stilregler. Med følgende mixin kan du hurtigt angive sidens øverste venstre, øverste højre, nederste venstre eller nederste højre - til skæv.

 @mixin vinkelkanten ($ pos-top: null, $ vinkel-top: null, $ pos-btm: null, $ angle-btm: null) bredde: 100%; stilling: relativ; baggrund: lineær gradient (til højre, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%); & :: før, & :: efter indhold: "; bredde: 100%; højde: 100%; position: absolut; baggrund: arve; z-indeks: -1; overgang: lette alle .5s; @if $ post-top & :: før @if $ post-top == 'topleft' top: 0; transform-oprindelse: højre top; transform: skewY ($ angle-top); @if $ post-top = = 'topright' top: 0; transform-oprindelse: venstre top; transform: skewY (- $ angle-top); @if $ post-btm & :: efter @if $ pos-btm == 'bottomleft' bund: 0; transform-oprindelse: højre bund; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bund: 0; transform-oprindelse: venstre bund; transformere: skewY ($ angle-btm); 

Der er fire variabler i mixin. De to første variabler, $ Pos-top og $ Vinkel-top, angiv venligst top startkoordinat og grad. De sidstnævnte to variabler angiver koordinere og grad for bund side.

Hvis du fylder alle fire variabler, kan du vinkle begge sider - øverst og nederst - af elementet.

Brug Sass @omfatte syntaks for at indsætte mixin til et element. Du kan se eksempler nedenfor:

For at tilføje skæv kant på øverst til venstre side:

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

For at tilføje skæv kant på nederst til højre side:

 .blok @include angle-edge (bottomright, 3deg);  

For at tilføje skæv kant på øverst til venstre og nederst til højre side:

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

Nedenfor er demoen med de anvendte mixiner. Skift markeringsboksen for at skifte til en anden stil.

Det er det!