Създаване на скосени ъгли с помощта на CSS3
В този урок ще разгледаме създаването на ефект на хоризонтални ъглови ръбове на уеб страница. Ако оформлението има леко непаралелни ръбове, то изглежда по-малко твърдо и скучно. За да създадем този ефект, ще използваме псевдоелементите ::before и ::after и CSS3 трансформации.
Използване на псевдо елементи
В този метод псевдоелементите ::before и ::after се използват за създаване на недесни ъгли на елемент. В примера по-долу ще направим долния ръб неуспореден на горния:
Нека да обобщим.
Свойството transform-origin указва координатите на елемента, който ще се трансформира. В примера по-горе ние задаваме тези координати вляво отдолу и това поставя началните координати на трансформацията в долния ляв ъгъл на полето.
свойство на трансформация: skewY(3deg); ще скоси ъгъла на блока ::after с 3 градуса. Тъй като задаваме началните координати като долния ляв ъгъл, долният десен ъгъл на блока ще се издигне с 3 градуса. Ако променим стойността на свойството начало на трансформацията на дясно отдолу, тогава долният ляв ъгъл ще се повиши с 3 градуса.
Можете да добавите непрозрачен фонов цвят или градиент, за да видите резултата:
Създаване на множество скосени ъгли
За да създадем множество скосени ъгли, като например скосяване на двата десни ъгъла, ще ни е необходим по-сложен код, където използваме псевдоелементите ::before и ::after едновременно:
Можете също да използвате CSS предварителни процесори, като Sass, за да опростите нещата. Вижте как са скосени ъглите в примера по-долу:
Това е всичко. Надяваме се, че този урок ви е харесал и ще го намерите за полезен.
Автор на урокаAgus Eko Setiyono