Как сделать такую разметку?

Question

[Илья Пирожок]

Есть идеи? Будут интересны все варианты

Answer 1

[Ivan Stroykin]

codepen.io/StivinKing/pen/rLdpzr
Это на быструю руку, можно привести к более короткому коду
Иконки вырезаем с белым фоном, и с помощью абсолютного позиционирования (отталкиваясь от предка "text") расставить на свои места.
В итоге у нас из картинок только иконки

Comments

[Илья Пирожок]

Я тоже делал через border, но через bg все же красивее выходит

[Ivan Stroykin]

Илья Пирожок: через bg будет полная статика. не сделать ни путной адаптивности, ни увеличить кол-во текста, потому что придется перерисовывать фон. А тут все будет подгоняться само, идеальная адаптивность и нет привязки к кол-ву текста ни по высоте, ни по ширине.

Answer 2

[IceJOKER]

1. Можно вырезать отдельные блоки и соединить их.
2. Можно вырезать рисунок(линии и иконки) , установить фоном для блока и внутри добавить два блока для текста(подогнать по размеру)