3

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

введите сюда описание изображения

1
  • Самый лучший вариант — подготовить изображения в большом разрешении и накладывать их 21 янв 2017 в 8:11

1 ответ 1

10

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.