Как сделать строку с горизонтальной прокруткой без обрезания?

Question

[Александр Рыбаков]

Добрый день, друзья!
Хочу реализовать такую штуку:

Трак сверстан на флексах, ширина считается в js(тупо складывается ширина всех блоков с контентом + отступы между ними без последнего).
overflow-x: auto; поставил для желтого блока
Трак обрезается желтыми границами. Требуется, чтобы по ширине желтого блока находился скролл, а в зеленых областях повесить блур. В блуре сложного ничего нет — лишь бы трак не обрезался желтыми границами.
И да, Надо чтобы трек стартовал с левой желтой границы!

Заранее огромное спасибо!

Comments

[Stalker_RED]

Теперь это тз выставь на фриланс.

[Александр Рыбаков]

Stalker_RED, что-то не так?
Я просто хочу понять, как это реализовать..

Answer 1

[Шохрух Шаймардонов]

У вас почти все имеется(судя по описанию задачи) вам только необходимо сделать блур. Для этого используйте ::before и ::after, стилизуйте их. Если решение нужно для современных браузеров то достаточно для них задать blur() в css, инача через js либо тот же самый css, только немного больше кода вместо blur'a

Comments

[Александр Рыбаков]

Там, где зеленые области — обрезается, т.е. не на что ставить блур

[Шохрух Шаймардонов]

Александр Рыбаков, всмысле? У вас желтая область(видимая часть трака) отцентрирована. Так у нее и будут псевдоэлементы