Как сделать круг слайдера с помощью только CSS?

Question

Я использую ползунок, где мне нужно сделать нумерацию страниц следующим образом:

Я буду использовать изображение спрайта CSS для этого, но мне просто интересно знатьесли возможно сделать с помощью CSS3 и без использования изображения

, HTML-код, который я хочу использовать для этого, включает в себя:

<ol id="pagination">
<li><a href="#slide1" class="active">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
<li><a href="#slide5">5</a></li>
</ol>

http://jsfiddle.net/danVW/

Answer 1

http://jsfiddle.net/9YTwk/1/

Я думаю, это то, что вы ищете. Конечно, CSS нужно немного изменить, чтобы получить градиент / тень.

// отредактировано, чтобы сделать его более похожим: http://jsfiddle.net/9YTwk/4/