Всем привет. Попался мне шаблон у которого секции не прямоугольные. Я пробовал его нарезать, но у мня вышло не очень хорошо всё это(код ниже будет) и пытался всё делать с помощью клипартов. В общем я зашел в тупик. Подскажите как правильно верстать такие секции. Код с использованием after
<div class="wrapper">
<header>
</header>
<section class="spiker">
</section>
</div>
* {
box-sizing: border-box;
}
.wrapper{
max-width: 970px;
}
header {
width: 100%;
min-height: 1086px;
background-image: url(http://s020.radikal.ru/i718/1610/53/2e62f2d87942.jpg);
background-repeat: no-repeat;
background-size: contain;
}
.spiker {
width: 100%;
min-height: 1371px;
background-image: url(http://s017.radikal.ru/i416/1610/f3/0f627944ef70t.jpg);
background-repeat: no-repeat;
background-size: contain;
}
.spiker::after {
width: 100%;
height: 163px;
top: 20px;
position: absolute;
background-image: url(http://s45.radikal.ru/i110/1610/c3/9837344ef991t.jpg);
background-repeat: no-repeat;
background-size: contain;
content: '';
}
Код с клипартами
<body>
<header></header>
<section class="section1"></section>
</body>
body {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
header{
width: 280px;
height: 280px;
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
}
.section1{
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%);
clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%);
}
