Чтобы сделать такой же наклон для границ блоков подвала или шапки сайта, нужно всего лишь воспользоваться 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;w — абсолютное позиционирование для псевдоэлемента. Чтобы поднять его над подвалом.
- 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;
Надеюсь, вам будет полезной данная статья и когда-то вы примените данный материал на своем проекте.