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

Question

[skdon]

Уважаемые гуру CSS, подскажите пожалуйста, как сверстать подобный блок?

Да так, что еще и адаптировался.
Натолкните на путь.
Вернее не совсем пойму, как можно организовать вот эту самую "змейку".

Answer 1

[Сергей delphinpro]

Примерно как-то так.
На скорую руку сверстал, только чтобы показать основные принципы.
Решение требует доработки.
Для адаптивности нужно добавить медиа-запросы.
Блок кода, где использованы nth-child для минимизации конфликтов стилей обернуть в строгие диапазоны пикселей (например 0-479, 480-922, 922-...)
Оперируя миксинами для создания рамок назначить нужные скругления. Миксины, возможно, придется доработать, чтобы совместить два скругления на одном блоке (на мобиле, когда они будут в один столбик)
В медиазапросах не забыть добавить order для правильного порядка следования блоков.

https://jsfiddle.net/DelphinPRO/63zpaag6/

В общем-то ничего архи-сложного. Но для получения товарного вида придется затратить время =) Дерзайте.

Comments

[Егор Живагин]

Улыбнуло очень решение убирать ненужные границы :after и :before ) Неплохо вышло

[Сергей delphinpro]

Krasnodar_etc: Лучше в первого и последнего вообще не рисовать границы, а имитировать их тем самым псевдолементом. Т.е. сделать наоборот =)
В общем, как я и сказал - решение требует доработки.

[Егор Живагин]

Сергей: полностью согласен, но, честно признаюсь, мне было бы лень сделать даже это просто ради ответа)

[Сергей delphinpro]

Да тут делов на 10 минут=)

[Сергей delphinpro]

Krasnodar_etc: ну и сделал я это не только ради ответа. Фиддл сохранен в профиле, может пригодится.

[skdon]

Большое спасибо. Все получилось. Как говорят. Дело мастера боится.

Answer 2

[Jimmy Neutron]

Ну как вариант через border делать, либо через background
На адаптив сомневаюсь что так получится.