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

Question

[Messi]

max-width: 1170px;

Comments

[Heyhihello]

Как насчет того, чтобы использовать медиа запросы?

[Messi]

Heyhihello: вопрос особенно о линии

[Heyhihello]

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

Answer 1

[Serj-One]

Элементарно - с помощью псевдоэлементов. Полукруг - это бордер половины блока с border-radius: 50%, ну а линия - это линия. Дальше с помощью медиазапросов корректировать под нужные разрешения.

Comments

[Messi]

Почему при добавлении такого блока получаются такие штуки? s018.radikal.ru/i526/1602/dd/b2e46520af2e.png

Answer 2

[Dark Hole]

Блииииииин.
Существует такая штука как calc в CSS. Сам ей часто пользуюсь. Left: clac(100% - 50px); - пример использования. линии - обычные картинки, которые растягиваются.

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

Answer 3

[Dvorak]

может, через canvas?
расположить пять кружочков легко. Нарисовать горизонтальные линии тоже легко. Возможно, возникнут трудности с кривыми

Comments

[Dark Hole]

Какие канвас, обычные картинки и стили

Answer 4

[Александр Таратин]

Как сверстать такой элемент?
В вашем случае можно даже без calc обойтись.