Как сделать полукруглый блок с таким же содержимым?

Question

[mihaevs]

всем хай!как сделать такой полукруглый блок с цифрами?какие технологии применять?

Comments

[Кирилл]

Какой блок? Вы о чём?

[Urukhayy]

@Kublyakov Видимо автор имеет ввиду отображение количества подписавшихся на вопрос.

[Rad1calDreamer]

недавно совсем эта картинка всплывала где-то тут.

Answer 1

[Виталий Киренков]

SVG.

Comments

[sabanovvv]

а как с помощью SVG блок сделать изогнутым?можете дать ссылку инфу или еще что нибудь)

[Виталий Киренков]

@sabanovvv: Я бы попросил дизайнера отрисовать это в Иллюстраторе, а потом бы экспортировал в свг.

Answer 2

[Кирилл Петров]

jsfiddle.net/zjpvjj2s
пример sim3x в действии

Answer 3

[Михаил Москалев]

Помимо svg можно заморочиться с css3 трансформациями

Comments

[mihaevs]

а как их с помощью svg то округлить?не нашел подходящей инфы

Answer 4

[Александр Таратин]

Предлагаю по-суровому.
Берем www.pixijs.com и отрисовываем все ручками.

Подобную безумную идею я выдвигаю по причине той, что svg грузит страницу ни чуть не меньше flash с отрисовкой через классический Display list.

Comments

[sabanovvv]

а с помощью svg это вообще как делается то?

[Александр Таратин]

@sabanovvv нуу лично мне проще через raphaeljs.com По сути нужно лишь 3 функции: отрисовка арки и прямоугольника с закругленными краями и текста. Тут документация raphaeljs.com/reference.html

[sabanovvv]

то есть каждому месту писать отдельно Js код?

[Александр Таратин]

@sabanovvv полярная система координат.

[sabanovvv]

поможете сделать?за вознаграждение конечно

[Александр Таратин]

@sabanovvv простите, но нет.