Как сделать пунктирную линию спрайтом?

Question

[Artem Pavliienko]

Всем привет. Нужно вот что сделать:


Кружки 3 на 3px, как его правильно реализовать? Я сначала делал
border-bottom: 3px dotted #ffcd4f;
но они получаются не кружками а квадратами, потом я вырезал 1 кружок и запихнул в спрайт, и показал через

background: url("../img/sprite.png") repeat-x -5px -96px

в итоге у меня все залилось без отступов. Подскажите пожалуйста как вообще это можно реализовать?

Answer 1

[Олег]

Может мой вариант подойдет https://jsfiddle.net/ar8x8p80/
Если конкретно для блока, то в after или hover засунуть стили

Comments

[Artem Pavliienko]

А можно отступ увеличить?

[Олег]

Artem Pavliienko, https://jsfiddle.net/ar8x8p80/1/

[Artem Pavliienko]

Олег, Спасибо

Answer 2

[Максим]

htmlbook.ru/css/border-image

Comments

[Artem Pavliienko]

А как с позиционировать картинку в спрайте?

Answer 3

[Андрей Федоров]

https://codepen.io/aliencash/pen/VywQrG?editors=1100#0