
СОЗДАЕМ КОСЫЕ БЛОКИ СРЕДСТВАМИ 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-файл с шапкой <header></header>:
<!DOCTYPE HTML>
<html>
<head>
<title> Косые блоки </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<main>
</main>
</body>
</html>

Текущие CSS стили для элемента header представлены в файле style.css:
body {
padding: 0;
margin: 0;
width:100%;
max-width: 1360px;
margin: 0 auto;
}
header {
background-color: #b33b6d;
height:260px;
}
main {
min-height:600px;
background-color: #e7e7e7;
}
Таким образом сейчас выглядит прямоугольная шапка.
Наша задача: опустить у элемента 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-файле выглядит так:
header {
background-color: #b33b6d;
height:260px;
transform: skew(0, -5deg);
margin-top: -70px;
}
main {
min-height:600px;
background-color: #e7e7e7;
margin-top: -70px;
}
Посмотрите на результат: косой блок поднялся выше и пользователю теперь видна только нужная часть шапки:

Поэкспериментируем с разными значениями параметров функции skew()
Ниже я расположу скриншоты с косыми блоками, которые получились в результате подстановки различных значений в качестве параметров CSS функции skew():
![]() | Положительное смещение по оси OY:transform: skew(0, 5deg); |
![]() | Отрицательное смещение по оси OY:transform: skew(0, -5deg); |
![]() | Положительное смещение по оси OX:transform: skew(8deg); |
![]() | Отрицательное смещение по оси OX:transform: skew(-8deg); |
![]() | Положительное смещение по осям OX и OY:transform: skew(8deg, 8deg); |
![]() | Положительное смещение по оси OX и отрицательное по оси OY:transform: skew(8deg, -8deg); |