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

Question

[olya_097]

Которые идут от кружка

Comments

[Rustam Bainazarov]

Адаптивно — JS. Либо городить костыли с картинками, и медизапросами.

[olya_097]

Рустам Байназаров, суть в том что нужно на десктопе 4 стрелки
а на мобилке 2

Или это мало что меняет?

[Rustam Bainazarov]

olya_097, мало что. Две картинки, если хотите на CSS.

[olya_097]

Рустам Байназаров, JS это общий ответ
Можно чуть подробнее, пожалуйста?

[Rustam Bainazarov]

olya_097, нет, нельзя, потому что мне день делать скрипт. В общих чертах: canvas или SVG, слушать ширину экрана или родителя элементов, считать количество элементов в первой строке, считать координаты середины каждого из элемента, рендерить линии на этом основании.

В 1000 раз проще сделать две SVG-картинки, тем паче в таком случае.

[olya_097]

Рустам Байназаров, В 1000 раз проще сделать две SVG-картинки, тем паче в таком случае.
--------

но если две свг картинки - то все равно ж будет криво

И если в макете они растр, то как делать?

[Rustam Bainazarov]

olya_097, не знаю, кроме как перерисовать вам эту линию самостоятельно.

Вот так для примера это можно сделать:

[olya_097]

Рустам Байназаров, спасибо

[Rustam Bainazarov]

olya_097, ну используйте PNG. если нет вектора, никакой разницы.

Answer 1

[Антон]

Вот набросок, далее допиливайте сами

Comments

[olya_097]

Антон, примерно так?
https://jsfiddle.net/umeryg1z/1/

[Антон]

olya_097, а чего вы у меня спрашиваете? :) Работает как вам нужно? - Значит так.
Только я бы JS в порядок привел и переписал это

limit = 4;
  if($(window).width() < 768) {
    limit = 2;
  }

т.к. написано это было быстро левой пяткой для наглядности

[olya_097]

Антон, да
спасибо огромное!