Главная
Web-дизайн
Косая граница блока или граница с наклоном

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

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

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

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



Пример

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 10, в среднем: 5 из 5

Опубликовано 6 комментариев

  • Юрий
    Комментариев: 1

    Страница с примером не найдена

  • Adrey
    Комментариев: 3

    Доброго времени. Почему-то до этого момента я применял svg-фигуры.
    А как сделать текст внутри треугольника? Бывают скосы по дизайну очень большие, на пол экрана вниз. Позволяет ли этот способ на CSS, что в данном посте, размещать внутри фигуры теги ?

    • Виталий
      Комментариев: 459

      Здравствуйте. Ну если объяснить на словах, то я бы сделал так. Если скос большой например высотой в 500 пикселей. Это много, чтобы оставить пустым. Я бы посмотрел на контент что идет перед скосом, например там тоже 1000 пикселей примерно высота.Первые 500 я бы отделил и залил их сплошным цветом, а вторые 500 высоты сделал бы прозрачным, вместо заливки - скос, что делается псевдоэлементом before, сдвинул бы вверх на -500 пикселей. Возможно еще и z-index:-1 сделать. Чтобы он был под текстом. Таким образом, скос будет заполнен инфой. Только ее нужно еще будет разместить в одну сторону скоса, чтобы не вылазило.

      • Andrey
        Комментариев: 3

        Да, вы совершенно правы. Во всех случаях надо на месте решать, как обойти тот момент, что тег DIV не позволяет быть фигурой, а по ТЗ от фотошопера множество дизайнерских многоугольников, содержащих в себе текст и прочее.
        Пробовал вот, пару часов в CodePen всякие варианты... Только наслоение z-index и position:absolut многое решает. Потому что для треугольника просто используются "гигантские" значения border-top и др.

        И не без внимания CSS-свойство clip-path, которое вообще решает ряд проблем. Но зато нет поддержки его даже браузером Edge для Win 8,10 Жесть и жаль конечно...

        • Виталий
          Комментариев: 459

          Я с 2013 года объявил бойкот ослу принципиально, не порчу даже код костылями под ИЕ. Едж, тот самый осел, но в новой обертке. Они нужны один раз, чтобы зайти на сайт Хрома и скачать его 🙂 Те, у кого на это нет ума и пытаются пользоваться убожеством, я даже стараться для них не хочу 🙂 Максимум добавить определение браузера на сайт и сообщение, мол, у вас убогий браузер, скачайте нормальный и не насилуйте себя 🙂

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко