Slik lager du skarpe kanter med CSS

I dette innlegget skal vi se på hvordan vi kan lage en vinklet kanteneffekt (horisontalt) på en nettside. I utgangspunktet ser det ut som noe slikt:

Å ha en litt vinklet kant bør gjøre webdesignet vårt mindre stivt og kjedelig. For å gjøre dette trikset, bruker vi pseudo-elementer ::før og ::etter og CSS3 Transform.

Bruk av pseudoelementer

Denne teknikken bruker pseudo-elementene ::før og ::etter å vinkle elementkanter. I dette eksemplet vil vi justere den nederste kanten.

 .blokkere høyde: 400px; bredde: 100%; posisjon: relativ; bakgrunn: lineær gradient (til høyre, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: etter innhold: "; bredde: 100%; høyde: 100%; posisjon: absolutt; bakgrunn: arve; z-indeks: -1; bunn: 0; transformasjons-opprinnelse: venstre bunn; transformere: skewY (3deg); 

La oss ta opp igjen.

De forvandle-opprinnelse spesifiserer koordinatene til elementet vi ønsker å transformere. I eksemplet ovenfor angitte vi venstre bunn som vil sette startkoordinatene nederst til venstre på blokken.

De transformere: skewY (3deg); gjør ::etter blokkere skrå eller vinkel på 3 grader. Siden vi angitt startkoordinatet som nederst til venstre, øker bunnen til høyre av blokken 3 grader. Hvis vi bytter forvandle-opprinnelse til høyre bunn og nederste venstre hjørne vil bli hevet 3 grader i stedet.

Du kan legge til en solid farget bakgrunn eller gradient for å se resultatet.

Gjør det enklere med Sass Mixin

For å gjøre dette lettere, har jeg opprettet en Sass mixin for å legge til de vinklede kanter, minus hodepine fra å håndtere kompleksiteten til stilregler. Med følgende mixin kan du raskt angi sidetopp til venstre, øverst til høyre, nederst til venstre eller nederst til høyre - å skråstille.

 @mixin vinkelkanten ($ pos-top: null, $ vinkel-topp: null, $ pos-btm: null, $ vinkel-btm: null) bredde: 100%; posisjon: relativ; bakgrunn: lineær gradient (til høyre, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: før, & :: etter innhold: "; bredde: 100%; høyde: 100%; posisjon: absolutt; bakgrunn: arve; z-indeks: -1; overgang: lette alle .5s; @if $ post-top & :: før @if $ post-top == 'topleft' topp: 0; transform-opprinnelse: høyre topp; transform: skewY ($ vinkel-topp); @if $ pos-top = = 'topright' top: 0; transform-opprinnelse: venstre topp; transform: skewY (- $ angle-top); @if $ pos-btm & :: etter @if $ pos-btm == "bottomleft" bunn: 0; transform-opprinnelse: høyre bunn; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bunn: 0; transform-opprinnelse: venstre bunn; transformere: skewY ($ angle-btm); 

Det er fire variabler i mixin. De to første variablene, $ Pos-topp og $ Vinkel-topp, spesifiser topp startkoordinat og grad. De to sistnevnte variablene angir koordinere og grad for bunn side.

Hvis du fyller opp alle fire variablene kan du vinkle begge sider - topp og bunn - av elementet.

Bruk Sass @inkludere syntaks for å sette mixin til et element. Du kan se eksempler under:

For å legge til skrå kant på øverst til venstre side:

 .blokk @include vinkelkanten (topleft, 3deg);  

For å legge til skrå kant på Nede til høyre side:

 .blokk @include vinkelkanten (bottomright, 3deg);  

For å legge til skrå kant på øverst til venstre og Nede til høyre side:

 .blokk @include vinkelkanten (topleft, 3deg, bottomright, 3deg);  

Nedenfor er demoen med mixins påført. Endre valgboksen for å bytte til en annen stil.

Det er det!