Julien Fouilhé Julien Fouilhé - 1 month ago 5
CSS Question

How to make circles repeat in the background of an element in full CSS?

I want to customize a slider like this:


So I was wondering if there was an easy CSS way of doing that, which would adapt to the width of the parent element. Or if I need to add circles in my html and set the color given the percentage.

Here are my two problems that I don't know how to do in full CSS:

  • Make circles repeat in the background

  • color only circles using some kind of overlay div that would have
    background: @color

Is any of that possible?


I don't want to use anything with javascript though, my webpages are heavy enough as is :p


You could fudge it with a full-stop repeated within a CSS content attribute on the :before and :after selectors.

Crude example: https://jsfiddle.net/xkueyxvb/