Как добиться вот такого отображения блоков при вёрстке?
Они в форме галочки (на сайте их несколько).
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу*,
*:before,
*:after {
box-sizing: border-box;
margin:0;
}
.block-1 {
position: relative;
height: 150px;
background: #8b8b89;
padding-bottom: 60px;
text-align: center;
}
.block-1:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 50px solid transparent;
border-left: 50vw solid red;
border-right: 50vw solid red;
border-bottom: 4px solid red;
}
.block-1:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 50px solid transparent;
border-left: 50vw solid #fff;
border-right: 50vw solid #fff;
}
.block-2 {
position: relative;
height: 150px;
background: #8b8b89;
padding-bottom: 60px;
padding-top: 60px;
text-align: center;
}
.block-2:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
border-top: 50px solid #fff;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
.block-2:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 50px solid transparent;
border-left: 50vw solid #fff;
border-right: 50vw solid #fff;
}
<div class="block-1">блок 1</div>
<div class="block-2">карта</div>
Надо отметить тот факт, что проблема с реализацией в IE и EDGE, посмотреть можно тут
div {
width: 100%;
height: 300px;
background: linear-gradient(to left, red, gray, orange,red, gray, orange);
clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}
<div></div>