Как да създадем изкривени ръбове с CSS

В тази публикация ще разгледаме как можем да създадем ефекта на ъгловите ръбове (хоризонтално) на уеб страница. По принцип изглежда по следния начин:

Наличието на леко наклонен ръб трябва да направи уеб оформлението ни по-малко твърдо и скучно. За да направим този трик, ще използваме псевдо-елементи ::преди и ::след и CSS3 Transform.

Използване на псевдоелементи

Тази техника използва псевдоелементите ::преди и ::след за ъгъл на ръбовете на елементите. В този пример ще коригираме долния край.

 .блок височина: 400px; ширина: 100%; позиция: относителна; фон: линеен градиент (надясно, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); ширина: 100%; височина: 100%; позиция: абсолютна; фон: наследи; z-индекс: -1; отдолу: 0; преобразуване-произход: ляво дъно; трансформира: skewY (3deg); 

Нека повторим.

Най- трансформиране на произход определя координатите на елемента, който искаме да трансформираме. В горния пример ние посочихме ляво долу това ще постави началните координати в долната лява част на блока.

Най- transform: skewY (3deg); прави ::след блокира наклона или ъгъл при 3 градуса. Тъй като посочихме началната координатна връзка в долния ляв ъгъл, долният десен ъгъл на блока повишава 3 градуса. Ако разменим трансформиране на произход да се дясно долу а долният ляв ъгъл ще бъде повишен с 3 градуса.

Можете да добавите плътен цвят или градиент, за да видите резултата.

Направете го по-лесно с Sass Mixin

За да направя това по-лесно, създадох Sass mixin, за да добавя под ъглите ръбове, без главоболията да се справям със сложните правила на стила. С помощта на следния миксин можете бързо да зададете страната - отгоре-наляво, отгоре-вдясно, долно-ляво или долно-дясно - да наклоняваме.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) ширина: 100%; позиция: относителна; фон: линеен градиент (надясно, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; ширина: 100%; височина: 100%; позиция: абсолютна; фон: наследява; z-индекс: -1; преход: облекчи всички .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' (отгоре: 0; преобразуване-произход: десен връх; преобразуване: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: ляв връх; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: дясно дъно; преобразуване: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' (отдолу: 0; трансформация: ляво дъно; transform: skewY ($ angle-btm); 

В миксина има четири променливи. Първите две променливи, $ Поз-отгоре и $ Ъгъл на върха, посочете начална координатна точка и степен. Последните две променливи определят координата и степен за дъно страна.

Ако попълните всичките четири променливи, можете да наклоните двете страни - отгоре и отдолу - на елемента.

Използвай Sass @include синтаксис, за да вмъкнете mixin в елемент. Можете да видите примери по-долу:

За да добавите изкривен ръб горе вляво страна:

 .блок @include ъгъл-ръб (topleft, 3deg);  

За да добавите изкривен ръб долу вдясно страна:

 .блок @include edge-edge (отдолу, 3deg);  

За да добавите изкривен ръб горе вляво и долу вдясно страна:

 .блок @ включи ъгъл-ръб (пръст, 3deg, долу, 3deg);  

По-долу е показана демонстрацията с приложените миксини. Променете полето за избор, за да превключите на друг стил.

Това е!