Страницы

Поиск по вопросам

вторник, 2 апреля 2019 г.

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

Нужен вот такой треугольник, чтобы тянулся адаптивно. Подскажите, как лучше его сверстать? Я пытался бордерами через 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; }


Комментариев нет:

Отправить комментарий