Schuine randen maken met CSS
In deze post gaan we bekijken hoe we een gehoekt randeffect (horizontaal) op een webpagina kunnen maken. Kortom, het ziet er ongeveer zo uit:
Met een licht gebogen rand zou onze weblay-out er minder stijf en saai uit moeten zien. Om deze truc te doen, zullen we de pseudo-elementen ::voor en ::na en CSS3 Transform.
Pseudo-elementen gebruiken
Deze techniek maakt gebruik van de pseudo-elementen ::voor en ::na om de elementranden te hellen. In dit voorbeeld zullen we de onderkant aanpassen.
.block height: 400px; breedte: 100%; positie: relatief; achtergrond: lineaire gradiënt (naar rechts, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transformation: skewY (3deg);
Laten we samenvatten.
De transformatie-oorsprong specificeert de coördinaten van het element dat we willen transformeren. In het bovenstaande voorbeeld hebben we aangegeven links onderaan die de startcoördinaten linksonder in het blok plaatst.
De transform: skewY (3deg); maakt de ::na blok scheef of hoek op 3 graden. Omdat we de startcoördinaat als linksonder hebben opgegeven, wordt de rechterbenedenhoek van het blok 3 graden verhoogd. Als we het wisselen transformatie-oorsprong naar rechts beneden en de linkerbenedenhoek wordt in plaats daarvan 3 graden verhoogd.
U kunt een effen achtergrond of verloop in kleur toevoegen om het resultaat te zien.
Maak het gemakkelijker met Sass Mixin
Om dit gemakkelijker te maken, heb ik een Sass-mixin gemaakt om de schuine randen toe te voegen, minus de hoofdpijn die te maken heeft met de complexiteit van stijlregels. Met de volgende mix kun je snel de zijkant opgeven: linksboven, rechtsboven, linksonder of rechtsonder - scheeftrekken.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; positie: relatief; achtergrond: lineaire gradiënt (naar rechts, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; transition: ease all .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right top; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left top; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' onder: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' onder: 0; transform-origin: links onderaan; transform: skewY ($ angle-btm);
Er zijn vier variabelen in de mixin. De eerste twee variabelen, $ Pos-top en $ Angle-top, specificeer de startbegeleiding bovenaan en de mate. De laatste twee variabelen specificeren de coördineren en de mate voor de bodem kant.
Als u alle vier de variabelen opvult, kunt u beide zijden - boven en onder - van het element schuin houden.
Gebruik de Sass @include syntaxis om de mixin in een element in te voegen. U ziet onderstaande voorbeelden:
Scheve rand toevoegen linksboven kant:
.block @include angle-edge (topleft, 3deg);
Scheve rand toevoegen rechts onder kant:
.block @include angle-edge (bottomright, 3deg);
Scheve rand toevoegen linksboven en rechts onder kant:
.blok @ inclusief hoek-rand (topleft, 3deg, bottomright, 3deg);
Hieronder is de demo met de toegepaste mixins. Wijzig het selectievakje om naar een andere stijl te schakelen.
Dat is het!
