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

309
23 января 2017, 17:49

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

Answer 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; 
}
<header></header> 
<section></section> 
<footer></footer>

READ ALSO
Как объединить 2 фильтра css

Как объединить 2 фильтра css

Как объединить эти 2 фильтра в 1? (Или как сделать 1 более насыщенным? - С 1 фильтром результат не устраивает)

417
Меню в виде таблицы [требует правки]

Меню в виде таблицы [требует правки]

Нужно большое меню в виде таблицыВо время событий over и click нужна анимация как текущей ячейки, так и соседних

300
Как полностью сохранить index.html сайта

Как полностью сохранить index.html сайта

Необходимо сохранить главную страницу сайта parimatchcom (не сочтите за рекламу), там есть слайдер, сохранение с помощью плагина scrapbook не сохраняет...

403
Передать дату из базы данных LINQ

Передать дату из базы данных LINQ

Как получить полную дату записи из базы данных с помощью LINQ

350