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 that you have read and understand our privacy policy and code of conduct.

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