Как сверстать вот такое?

Question

[Денис Денис]

подскажите как сверстать такие стрелки, буду очень признателен.

Answer 1

[Алексей Зуев]

Можно примерно так.

Comments

[Anton Filippov]

Если после этого ТС не кинет вам 100 рублей на телефон, то я не знаю кто он)

[Денис Денис]

конечно я не против оплатить, только бы знать куда) сделал вчера на svg, но тут еще и адаптивно сразу))) просто шикарно, спасибо огромное!

[warcevil]

Что это за хрень? Ненавижу тебя! Теперь я считаю себя полным дебилом =(

Answer 2

[A K]

В любой непонятной ситуации используйте svg

Comments

[Денис Денис]

Спасибо

Answer 3

[Nikolay Talanov]

1) Если все это дело вообще статичное и не должно быть адаптивным, то можно вообще хоть картинкой делать, с текстом отдельно (вариант для инвалидов).
2) Можно сварганить с помощью :before/:after/div. Одни элементы будут отвечать за линии, другие за css-треугольники. Вариант для тех, кто боится SVG.
3) SVG. Самый правильный вариант. И анимировать все красиво можно будет (включая круги), и на всех мониторах все будет выглядеть отлично.

Comments

[Денис Денис]

Спасибо, понял svg... линии, стрелки, круги-svg. Иконки и текст divaми?

[Максим Тимофеев]

Денис Ручьев: иконки само собой в svg, ну и текст тогда тоже.

[Денис Денис]

Максим Тимофеев: понял) только простые фигуры svg)

Answer 4

[Денис Денис]

на svg еще вчера сделал

<svg>
				<line x1="155" y1="203" x2="301" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="405" y1="203" x2="551" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="657" y1="203" x2="803" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="155" y1="487" x2="301" y2="487" stroke-width="2" stroke="#fff"/>
				<line x1="405" y1="487" x2="551" y2="487" stroke-width="2" stroke="#fff"/>
				<line x1="657" y1="487" x2="803" y2="487" stroke-width="2" stroke="#fff"/>
				<polyline points="905,203 958,203 958,339 2,339 2,487 52,487" fill="none" stroke-width="2" stroke="#fff"/>
				<polygon points="219,210 230,203 219,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,210 480,203 469,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="721,210 732,203 721,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,346 458,339 469,332" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="219,480 230,487 219,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,480 480,487 469,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="721,480 732,487 721,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<circle cx="104" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="354" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="604" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="854" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="104" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="354" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="604" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="854" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
			</svg>

а текст и иконки divaми