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

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

5c1e41a455baa330643594.jpeg5c1e41bf948d6058617655.jpeg
  • Вопрос задан
  • 280 просмотров
Решения вопроса 1
@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) */
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@mcrack25
Если вы о верхней траве, то делайте её картинкой, а точнее маленьким паттерном с bacground repeat-x.

Если про линии до блока слева, то можно сделать обычную шапочку на блоке, сделать её position relative, затем сделать стили для псевдокласса before, сделать его блочным растянутым и абсолютным и прижать просто к краю шапочки
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы