Как можна сверстать такой блок?

Question

[Юрий Олиярнык]

Ну вобшем...
Как такое можна сверстать?

Answer 1

[Whiteweb]

с помощью div блоков, но придется попотеть

Comments

[Юрий Олиярнык]

это я и сам понимаю
Знаю что можна создать несколько блоков для каждого тексту и просто роставить их по местах
но как сделать эти линии... не знаю
и самое главное надо это сделать адаптивным

[Whiteweb]

jsfiddle.net/shpaker/uwCFS

[Whiteweb]

почитай про canvas

Answer 2

[sh1ftyshmifty]

Задаешь абсолютное позиционирование блокам и собственно, всё.

Answer 3

[Пётр Зубков]

Совет века: сверстай картинкой, задай ширину в %. Тут и адаптивность, и парится не надо с canvas (или ещё с какой химерой)

Comments

[Юрий Олиярнык]

Я так и сделал
но интересно, можна ли как то по другому

[Пётр Зубков]

Ну можно через css задать bg-image для блока. Ещё можно нарезать 6 картинок и все их спозиционировать через, угадали, css

[Александр]

Пётр Зубков: мне больше интересно, - как эти белые линии - указатели сделать если не картинкой?

[Пётр Зубков]

svg

Answer 4

[holymotion]

да в принципе реально сделать, делаешь там 6 div`ов. Круги, где идут чёрточки, можно вырезать сделать картинку(чёрточки) на границу, сделать ей repeat. Фоновый цвет transparent. В главном div'е вроде ничего особенного сложного нет. Надписи сделать через например тот же z-index. Ну а эти линии уже и картинкой можно.