Создаем косые блоки средствами 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);