Как сверстать такой элемент?

#html #css

Нужен вот такой треугольник, чтобы тянулся адаптивно. Подскажите, как лучше его сверстать?
Я пытался бордерами через before и after, но линии соприкосновения уезжали на некоторых
разрешениях. Заранее спасибо.


    

Ответы

Ответ 1

* {
  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;
}