Чтобы сделать такой же наклон для границ блоков, подвала или шапки сайта, нужно всего лишь воспользоваться CSS. Делается все с помощью псевдоэлементов after или before.
К примеру, у вас есть подвал footer и вы решили сделать ему границу с наклоном как в примере. Он должен быть на всю ширину экрана, то бишь - width:100%;. Ну и добавляем ему псевдоэлемент before.
footer{
margin-top:100px;
position:relative;
width:100%;
background:#212121;
}
footer:before{
content:'';
position:absolute;
top:-50px;
width:0;
height:0;
border-bottom: 50px solid #212121;
border-right: 100vw solid transparent;
}
Давайте немного разберем параметры, которые мы присвоили подвалу:
- margin-top:100px; - отступаем от основного контента, чтобы наклон не налез на предыдущий блок.
- position:relative; - чтобы псевдоэлемент был рядом с подвалом и не подскочил в верх страницы. Можно так же устанавливать и position:absolute; если это требуется. Тот же подвал, вы можете прижимать к низу страницы с помощью абсолютного позиционирования.
- width:100%; - растягиваем на всю ширину страницы.
- background:#212121; - фон подвала, он должен быть таким же, как и цвет обводки нашего псевдоэлемента.
И его псевдоэлементу footer:before
- content:''; - обязательный параметр для псевдоэлементов.
- position:absolute; - абсолютное позиционирование для псевдоэлемента. Чтобы поднять его над подвалом.
- top:-50px; - высота, на которую поднимаем псевдоэлемент над подвалом. Она должна соответствовать толщине нижней линии/обводке.
- width:0;height:0; - обязательно задаем ширину и высоту с нулевым значением.
- border-bottom: 50px solid #212121; - параметры нижней границы обводки. Высота 50 пикселей. Именно та высота, что должна быть одинаковой с высотой на которую мы поднимаем наш псевдоэлемент. так же определяем, что это полоса с цветом, таким же как сам подвал.
- border-right: 100vw solid transparent; - параметр правой границы. Задаем ширину в единицах viewport - vw со значением 100. Это схоже с 100%, но проценты не работают для установки ширины границ. и указываем что это полоса с прозрачным цветом.
По своей сути, мы с вами применили создание геометрических фигур с помощью CSS и создали треугольник. делается это с помощью границ обводки. Сам псевдоэлемент без размеров, а границы окрашены, что и создало треугольник, который мы разместили над подвалом. это создало эффект наклона и косого футера.
Все это можно провернуть для любого блока. данный пример показан для треугольника что размещается над блоком, Чтобы разместить под, то указываются такие параметры границ:
border-top:50px solid #212121; border-right:100vw solid transparent;
Можно так же менять правую границу
Как видите, мы просто поменяли border-bottom на border-top. Так же можно менять и правую границу с левой и будет так:
border-top:50px solid #212121; border-left:100vw solid transparent;
В общем, можете подбирать свои варианты и менять направление наклона и его расположение над блоком или под.
Кстати, чтобы разместить под блоком, позиционирование нужно тоже правильно указывать то бишь top:-50px; заменить на bottom:-50px;
Надеюсь, вам будет полезной данная статья и когда-то вы примените данный материал на своем проекте.
На этом все, спасибо за внимание. 🙂
