Нужен вот такой треугольник, чтобы тянулся адаптивно. Подскажите, как лучше его сверстать? Я пытался бордерами через 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;
}
<header></header>
<section></section>
<footer></footer>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как объединить эти 2 фильтра в 1? (Или как сделать 1 более насыщенным? - С 1 фильтром результат не устраивает)
Нужно большое меню в виде таблицыВо время событий over и click нужна анимация как текущей ячейки, так и соседних
Необходимо сохранить главную страницу сайта parimatchcom (не сочтите за рекламу), там есть слайдер, сохранение с помощью плагина scrapbook не сохраняет...