Можно ли сверстать на чистом css+html змейку?

Question

[Александр Новиков]

Есть данный макет, можно ли его сверстать без использования картинок, если можно то подскажите как.
Спасибо!

Answer 1

[Павел Антонов]

я думаю можно, я бы сделал div'ами с разным border-radius'ом ну и position:absolute, думаю пригодился бы

codepen.io/freislot/pen/ZLoaKd
Примерно так, ну вы понимаете это на скорую руку в качестве примера, нет времени выставлять все красиво, думаю суть моего метода ясна

Comments

[Александр Новиков]

Да, как самый простой вариант это подходит, спасибо!
Но там жестко заданы размеры и позиции, а меня больше интересует возможность резиновой структуры (количество текста может меняться в каждом блоке ), поэтому нам точно не известно высота каждого блока

[Павел Антонов]

novisasha: ну и тут выход есть) я бы js считал высоту блоков и устанавливал нужным блокам ее тоже через js, возможно всё, нужно просто уже на практике смотреть и отталкиваться от конкретной задачи.

[Павел Антонов]

Но это уже получится не чистый html+css раз мы прибегаем к js :) костыль выходит. Зато без картинок. В общем нужно придумать формулу по которой будут считаться border-radius у скругленных блоков, и js'ом брать высоту блока с текстом и на основе нее давать новую высоту блокам с радиусом.