Нужен вот такой треугольник, чтобы тянулся адаптивно. Подскажите, как лучше его сверстать? Я пытался бордерами через before и after, но линии соприкосновения уезжали на некоторых разрешениях. Заранее спасибо.
Ответ
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
header,
section,
footer {
min-height: 200px;
position: relative;
}
header {
background: url('http://www.bahai.org/chrome/img/beliefs/nature-feature-img.jpg?f0550045') no-repeat center top;
background-size: cover;
}
header:before,
header:after {
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
z-index: 1;
}
header:before {
left: 0;
border-width: 50px 0 0 50vw;
border-color: transparent transparent transparent #ccc;
}
header:after {
right: 0;
border-width: 0 0 50px 50vw;
border-color: transparent transparent #ccc transparent;
}
section {
background: #ccc;
}
section:after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-bottom-width: 0;
border-right-width: 50vw;
border-top-width: 50px;
border-left-width: 50vw;
border-color: #ccc transparent transparent transparent;
z-index: 1;
}
footer {
background: #FFE79F;
}
Комментариев нет:
Отправить комментарий