Как сверстать полоску состоящую из множества кругов?

Question

[Серафим]

Приветствую всех! Верстаю макет для стажировке, и возникли проблемы с со стилизацией блока. Вот что должно получиться.
.
Нужно сделать полоску из кружков, длина полосы должны меняться с разрешением. Пытался сделать так:
Серую полоску делал через пустой блок с верхней границей, сверху накладывал через before вторую с абсолютным позиционированием, но полоски криво накладываются(код не скидываю, т.к. параллельно практикую bem и пока это похожу на кашу)

Answer 1

[Ankhena]

background-image radial-gradient
и background-repeat

https://jsfiddle.net/Lm6duqb4/

С наложением синих https://jsfiddle.net/6jL3dhet/
Проблемы кратности ширины можно по разному решать.

Comments

[Серафим]

Спасибо вам за новый метод) Но моей главной проблемой было наложение второй полоски из синих кружков. Соответственно сделать нужно несколько блоков из серых кружков, произвольное количество из них закрашено синим

[Ankhena]

Серафим, и что не выходит?

background-repeat надо поменять на repeat-x либо вычислять ширину второй полоски
и накладывайте на здоровье

[Серафим]

Спасибо, буду пробовать)

[RAX7]

Серафим,

[Серафим]

RAX7, омг, только благодаря вашей записи понял, как работают свойства background'a)) Спасибо)

Answer 2

[HamSter]

В дополнение к Ankhena :

div {
  background: radial-gradient(ellipse at center, #ccc 0%, #ccc 50%, transparent 50%);
  background-size: 50px 50px;
  background-repeat: repeat-x;
  background-position: 0px center;
}

Пример на jsbin

Comments

[Серафим]

Спасибо за помощь!