Если вам требуется сделать границы шапки или подвала скошенными, то достаточно применить к элементу CSS-свойство clip-path со значением polygon(), которое определяет многоугольник, используя правило заполнения SVG и набор вершин.
В свойстве указываются все края фигуры в процентах в виде координат «x y», точка отсчета – левый верхний угол. Например ниже, указаны все точки исходного прямоугольника.
Теперь изменим точку «2», смещение по оси у на 10%:
В HTML-вёрстке почти во всех примерах используется div c классом block, меняются CSS-стили.
<div class="block">
...
</div>Header №1
.block {
background: #4380db;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}Результат:
Header №2
.block {
background: #4380db;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}Результат:
Content №1
.block {
background-color: #2c681d;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);
}Результат:
Content №2
.block {
background-color: #2c681d;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}Результат:
Content №3
<div class="block-1">
...
</div>
<div class="block-2">
...
</div>.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;
}Результат:
Footer №1
.block {
background: #db4343;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0% 10%, 100% 0%, 100% 1000%, 0 100%);
}Результат:
Footer №2
.block {
background: #db4343;
color: #fff;
padding: 60px 40px;
clip-path: polygon(0% 0%, 100% 10%, 100% 1000%, 0 100%);
}
