Что ж, SVG, безусловно, кажется правильным решением (или холстом, но я бы предпочел SVG). И сценарий Raphael будет работать даже в старых версиях IE, так как он переключается на VML в IE6 / 7/8, поэтому, если вы пытаетесь избежать SVG / Canvas из-за этого, вам не нужно беспокоиться.
Но вы спрашиваете, как это сделать без них, так что я посмотрю, что я могу сделать ...
Есть ряд людей, которые продемонстрировали рисование некоторых довольно сложных фигур с использованием чистого CSS. См. Например, http://css-tricks.com/examples/ShapesOfCSS/ .
В чистом CSS / HTML единственный реалистичный способ рисовать кривые - использовать border-radiusстиль. Круг в соответствии с примером в вопросе может быть получен с использованием квадратного элемента с border-radiusтолстой рамкой.
Рисование концентрических кругов в соответствии с этим вопросом будет включать в себя многочисленные элементы, наложенные друг на друга, каждый из которых стилизован одинаково, но разных размеров.
Теперь хитрый момент. Превратить их из кругов в дуги будет сложнее. Единственный разумный способ сделать это - это наложить еще несколько элементов поверх кругов, окрашенных так же, как и фон, чтобы скрыть часть круга. Нам нужно использовать CSS, transformчтобы повернуть их так, чтобы угол среза был правильным.
Так что это может быть сделано.
Анимировать его (конечно, так же хорошо, как в примере) было бы на порядок сложнее, и я бы не хотел даже думать об этом. Просто дай мне SVN в любой день.