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

Віталий

7 років ago

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

Доброго времени суток. 🙂

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

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

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

На этом все, спасибо за внимание. 🙂

Exit mobile version