Как сделать кривые границы блоков в CSS

Если вам требуется сделать границы шапки или подвала скошенными, то достаточно применить к элементу CSS-свойство clip-path со значением polygon(), которое определяет многоугольник, используя правило заполнения SVG и набор вершин.

1

В свойстве указываются все края фигуры в процентах в виде координат «x y», точка отсчета – левый верхний угол. Например ниже, указаны все точки исходного прямоугольника.

Теперь изменим точку «2», смещение по оси у на 10%:

2

3

В HTML-вёрстке почти во всех примерах используется div c классом block, меняются CSS-стили.

<div class="block">
	...
</div>
HTML
.block {
	background: #4380db;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
CSS

Результат:

.block {
	background: #4380db;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}
CSS

Результат:

.block {
	background-color: #2c681d;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);
}
CSS

Результат:

.block {
	background-color: #2c681d;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}
CSS

Результат:

<div class="block-1">
	...
</div>

<div class="block-2">
	...
</div>
HTML
.block-1 {
	background: #2c681d;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
	padding: 60px 40px;
	color: #fff;
}
.block-2 {
	background: #ff9d2f;
	margin-top: -5vw;
	padding: 60px 40px;
	color: #000;
}
CSS

Результат:

.block {
	background: #db4343;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0% 10%, 100% 0%, 100% 1000%, 0 100%);
}
CSS

Результат:

.block {
	background: #db4343;
	color: #fff;
	padding: 60px 40px;
	clip-path: polygon(0% 0%, 100% 10%, 100% 1000%, 0 100%);
}
CSS

Результат:

07.04.2022
8792
Следующая запись Таймер и задержка в JS

Комментарии

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

Другие публикации

Плавное увеличение фонового изображения
В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
8448
+1
Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
76607
+9
Изменение CSS-градиента в зависимости от положения курсора
Изменение градиента, в зависимости от положения курсора над элементом можно сделать с помощью JS, получив его...
5233
+6
Затемнение изображения и фона с помощью CSS
Несколько примеров как затемнить изображение в свойстве background и теге img.
94589
+14
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
54560
+9
Рамки блоков с градиентом
Примеры, как сделать рамку блока с градиентом и анимировать её.
10213
0