Как сверстать блок с данными?

Question

[tkachenkoaanna097]

Comments

[Lord_Dantes]

SVG картинку, текст - текстом

Answer 1

[Moon Presence]

Самая обычная верстка в которой нет ничего сложного. Рассчитываете ширину текстовых блоков, затем псевдоэлементами создаёте все эти полоски и расставляете над блоками. Самую большую полоску можно разместить отдельным элементом, сверху над текстовыми блоками, а маленькие полоски псевдоэлементами текстовых блоков + добавить иконку. Собственно говоря вариантов решения задачи несколько, но почти все сводятся к использованию абсолютного позиционирования элементов.

Например как-то так:

Comments

[tkachenkoaanna097]

Moon Presence, ага. ну вроде примерно понятно. а как сделать чтобы текстовый блок выходил за полоску?

[Moon Presence]

tkachenkoaanna097, обновил ответ.

[tkachenkoaanna097]

Moon Presence, спасибо огромное!

Answer 2

[Ragtime Kitty]

Можно, например, вот так: