Hur man skapar skrynkliga kanter med CSS
I det här inlägget ska vi titta på hur vi kan skapa en vinklad kant effekt (horisontellt) på en webbsida. I grund och botten ser det ut som om det här:
Att ha en något vinklad kant ska göra vårt webblayout se mindre styvt och tråkigt. För att göra det här tricket kommer vi att använda pseudo-element ::innan och ::efter och CSS3 Transform.
Använda pseudoelement
Denna teknik använder pseudoelementen ::innan och ::efter att vinkla elementets kanter. I det här exemplet kommer vi att justera bottenkanten.
.blockera höjd: 400px; bredd: 100%; position: relativ; bakgrund: linjär gradient (till höger, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: efter innehåll: "; bredd: 100%; höjd: 100%; position: absolut; bakgrund: arv; z-index: -1; botten: 0; transform-ursprung: vänstra botten; transformera: skewY (3deg);
Låt oss sammanfatta.
De transform-ursprung specificerar koordinaterna för det element vi vill transformera. I exemplet ovan specificerade vi vänster botten som sätter startkoordinaterna på botten till vänster om blocket.
De transformera: skewY (3deg); gör ::efter blockera skev eller vinkel vid 3 grader. Eftersom vi angav startkoordinat som botten vänster höjs botten till höger av 3 grader. Om vi byter ut transform-ursprung till höger under och det nedre vänstra hörnet kommer att höjas 3 grader istället.
Du kan lägga till en färgfärgbakgrund eller gradient för att se resultatet.
Gör det enklare med Sass Mixin
För att underlätta detta har jag skapat en Sass mixin för att lägga till de vinklade kanterna, minus huvudvärk från att hantera komplexiteten i stilregler. Med följande mixin kan du snabbt ange sidorna till vänster, höger, nederst till vänster eller längst ner till höger.
@mixin vinkelkanten ($ pos-top: null, $ vinkel-topp: null, $ pos-btm: null, $ vinkel-btm: null) bredd: 100%; position: relativ; bakgrund: linjär gradient (till höger, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: före, & :: efter innehåll: "; bredd: 100%; höjd: 100%; position: absolut; bakgrund: arv; z-index: -1; övergång: lindra alla .5s; @if $ post-top & :: före @if $ post-top == 'topleft' top: 0; transform-ursprung: högst upp; transform: skewY ($ vinkeln); @if $ post-top = = 'topright' top: 0; transform-ursprung: vänster topp; transform: skewY (- $ vinkel-topp); @if $ pos-btm & :: efter @if $ pos-btm == "bottomleft" bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' botten: 0; transformera: skewY ($ angle-btm);
Det finns fyra variabler i mixin. De två första variablerna, $ Pos-top och $ Vinkel-top, specificera topp startkoordinat och den grad. De senare två variablerna anger samordna och den grad för botten sida.
Om du fyller upp alla fyra variablerna kan du vinkla båda sidorna - topp och botten - av elementet.
Använd Sass @inkludera syntax för att infoga mixin till ett element. Du kan se exempel nedan:
För att lägga till skrå kant på övre vänstra sida:
.blockera @ include angle-edge (topleft, 3deg);
För att lägga till skrå kant på nere till höger sida:
.blockera @ include angle-edge (bottomright, 3deg);
För att lägga till skrå kant på övre vänstra och nere till höger sida:
.blockera @ include angle-edge (topleft, 3deg, bottomright, 3deg);
Nedan följer demoen med blandade applikationer. Ändra markeringsfältet för att växla till en annan stil.
Det är allt!
