Как сделать косые блоки css

Создаем косые блоки средствами CSS

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

Суть процесса создания косых блоков на CSS: Весь изюм заключается в применении к редактируемому блоку CSS свойства transform со значением в виде функции skew().

Как использовать функцию skew()?

CSS функция skew() используется для изменения положения объекта в 2D. У функции может быть задан:

• только один параметр — угол наклона вдоль оси X, skew(angleX). В этом случае угол наклона вдоль оси Y будет равен значению по умолчанию, то есть нулю.
• два параметра: угол наклона вдоль оси X и угол наклона вдоль оси У: skew(angleX, angleY).

Единицами измерения для параметров являются градусы, которые записываются как deg. Например, skew(15deg, 3deg).

Потренируемся: cоздадим косой блок в шапке сайта

Предлагаю в качестве тренировки наклонить шапку сайта примерно на 5 градусов. Для начала посмотрим на исходные данные:

Стандартный HTML-файл с шапкой :

Текущие CSS стили для элемента header представлены в файле style.css:

Таким образом сейчас выглядит прямоугольная шапка.

Наша задача: опустить у элемента header левый нижний угол на 5 градусов.

1. Для начала добавим в список свойств для элемента header свойство transform: skew(0, -5deg). Так как мы запланировали сдвинуть вниз левый нижний угол прямоугольного элемента, то изменять мы будем только угол между осью OY. На расположенных ниже рисунках я показала, почему значение второго параметра в функции skew() отрицательно. Относительно оси OX положение элемента не изменится, поэтому первый параметр функции равен нулю.

Посмотрим, что получилось:

Розовый прямоугольник в верхней части сайта, действительно, стал косым блоком. Однако, в результате изменений в левом верхнем углу теперь зияет дырка, требующая срочного ремонта. Спрячем ее с помощью свойства margin-top. Мы просто поднимем шапку на 70px. То есть для элемента header в CSS файле добавим margin-top: -70px. Аналогично сдвинем расположенный под шапкой элемент main, дополнив его список свойств отрицательным отступом сверху: margin-top: -70px. Теперь список css свойств для элементов header и main в css-файле выглядит так:

Посмотрите на результат: косой блок поднялся выше и пользователю теперь видна только нужная часть шапки:

Поэкспериментируем с разными значениями параметров функции skew()

Ниже я расположу скриншоты с косыми блоками, которые получились в результате подстановки различных значений в качестве параметров CSS функции skew():

Как видно из примеров, создать косые блоки в CSS довольно просто. Кроме того, грамотное применение функции skew() заметно преображает дизайн и повышает внимание к информации, размещенной в косых блоках.

Источник

Блок со скошенным углом на CSS

Существует несколько способов создания блоков со скошенными углами на CSS. Блоки со скошенными углами можно использовать для секций или для всевозможных карточек на сайтах. На макетах для верстки такой способ отрисовки блоков довольно часто встречается.

Посмотрите демо на CodePen

Независимо от способа, у нас всегда будет блок и псевдоэлемент (before / after). Сделаем у блока правый верхний угол скошенным.

// HTML разметка

// CSS код
.block width: 250px; // ширина блока
height: 300px; // высота блока
background-color: red; // цвет блока
position: relative; // позиционируем относительно этого блока
>

.block::before display: block; // это блочный элемент
content: »; // без него псевдоэлемент не отрисуется
width: 100%; // на всю ширину блока-родителя
height: 30px; // высота скошенного края
background: black; // цвет скошенного края
position: absolute; // позиционируем относительно block
top: 0; // пристроим к верхней части блока
left: 0; // пристроим к левой части блока
transform: translateY(-100%); // сдвигаем вверх на 30 пикселей
>

Мы видим псевдоэлемент черного цвета в верхней части блока. Нам пришлось его сдвинуть вверх на его собственную высоту (30 пикселей). Черный цвет используется для лучшей наглядности.

Первый способ: linear-gradient()

Эффект скошенного края получается за счет резкого перехода между двумя цветам у линейного градиента. Поэтому зададим свойству background вместо черного цвета, линейный градиент. Укажем направление заливки градиентом (из нижнего левого угла к верхнему правому), от красного (цвет блока) до прозрачного цвета и по 50% на каждый цвет, чтобы был резкий переход.

background: linear-gradient(to top right, red 50%, rgba(255,0,0,0) 52%);

Второй способ: transform: skewY()

Значение skewY() свойства transform будет искажать наш блок по оси Y на .-175 градусов. Вернем у псевдоэлемента before назад красный цвет и добавим к свойству трансформации, искажение skew.

.block::before background: red;
transform: translateY(-100%) skewY(-175deg);
>

Для ликвидации белой полоски, нужно поменять местоположение точки, относительно которой отрабатывает трансформация. По умолчанию эта точка находится в центре. Добавим свойство transform-origin и зададим ему значение left.

Оба эти способа имеют хорошую поддержку у браузеров, даже у семейства Microsoft.

Создано 15.05.2020 10:33:21

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как сделать косые блоки css

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

Чтобы сделать такой же наклон для границ блоков подвала или шапки сайта, нужно всего лишь воспользоваться CSS. Делается все с помощью псевдоэлементов after или before .

К примеру, у вас есть подвал footer и вы решили сделать ему границу с наклоном как в примере. Он должен быть на всю ширину экрана, то есть — width:100%; и добавляем ему псевдоэлемент before.

Давайте немного разберем параметры, которые мы присвоили подвалу.

• 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;

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

Источник

Создание скошенных углов с использованием CSS3

В этом уроке мы рассмотрим создание эффекта горизонтальных краев под углом на веб-странице. Если в макете есть немного непараллельные края, он выглядит менее жестким и скучным. Для создания этого эффекта мы воспользуемся псевдоэлементами ::before и ::after и трансформациями CSS3.

Использование псевдоэлементов

В этом способе псевдоэлементы ::before и ::after используются для создания непрямых углов у элемента. В примере ниже мы сделаем нижний край непараллельным верхнему:

.block height: 400px; width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); > .block::after content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(3deg); >

Свойство transform-origin задает координаты элемента, которые нужно трансформировать. В примере выше мы задали эти координаты как left bottom , и это поместило координаты начала трансформации в левый нижний угол блока.

Свойство transform: skewY(3deg); скосит угол блока ::after на 3 градуса. Так как мы задали координаты начала как левый нижний угол, то правый нижний угол блока поднимется на 3 градуса. Если мы изменим значение свойства начала трансформации на right bottom, то левый нижний угол поднимется на 3 градуса.

Можно добавить непрозрачный цвет фона или градиент, чтобы увидеть результат:

Создание нескольких скошенных углов

Чтобы создать несколько скошенных углов, например, скосить оба правых угла, нам понадобится несколько более сложный код, в котором мы воспользуемся сразу обоими псевдоэлементы ::before и ::after:

.block  width: 100%; position: relative; background: linear-gradient(to right, #f1e767 0%, #feb645 100%); > .block:before, .block:after  content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; > .block:before  top: 0; transform-origin: left top; transform: skewY(-3deg); > .block:after  bottom: 0; transform-origin: left bottom; transform: skewY(3deg); >

Также для упрощения можно использовать предпроцессоры CSS, например, Sass. Посмотрите, как скашиваются углы в примере ниже:

Это все. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Agus Eko Setiyono

Источник