Косая граница блока или граница с наклоном

В данной статье мы расскажем, как организовать на вашем сайте интересное решение, а именно речь пойдет о том. как организовать разделение блоков с помощью косых границ или наклонов. Суть идеи в том, чтобы линии были не строго горизонтальными, а под углом. Данный эффект часто применяют при создании лендингов, хотя можно встретить в дизайне и обычных сайтов. Ведь придание необычности своему сайту только в пользу. В итоге у вас получится примерно такой результат:

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

Надеюсь, вам будет полезной данная статья и когда-то вы примените данный материал на своем проекте.