Как лучше сверстать такой блок?

Подскажите, как лучше сверстать такие блоки - речь идет об этих полосках (на bootstrap):

5c1e41a455baa330643594.jpeg5c1e41bf948d6058617655.jpeg
  • Вопрос задан
  • 264 просмотра
Пригласить эксперта
Ответы на вопрос 2
@mcrack25
Если вы о верхней траве, то делайте её картинкой, а точнее маленьким паттерном с bacground repeat-x.

Если про линии до блока слева, то можно сделать обычную шапочку на блоке, сделать её position relative, затем сделать стили для псевдокласса before, сделать его блочным растянутым и абсолютным и прижать просто к краю шапочки
Ответ написан
@Alexandros96
Прогер
Набросал быстро, но думаю суть уловите.
https://codepen.io/AlexandrDev/pen/jXmXrd

Если словами, то к колонкам добавить псевдо-элемент before с абсолютным позиционированием и длиной 100vw.
.column::before {
	content: '';
	display: block;
	background: green;
	width: 100vw;
	height: 20px;
	position: absolute;
	top: -20px;
	right: 15px;  /* для bootstrap (прибавляем padding) */
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
от 56 000 до 56 000 руб.
Sveak Барнаул
от 50 000 руб.