Julien Fouilhé Julien Fouilhé - 3 months ago 8
CSS Question

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

I want to customize a slider like this:

Slider

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?

Thanks!

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

Answer

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/