Круг с тремя разными цветами границ

У меня есть CSS для круга с одним цветом границы:
.circle { border: 6px solid #ffd511; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; width: 30px; height: 18px; line-height: 20px; padding: 12px 6px; text-align: center; }

17

Как я должен изменить CSS, чтобы иметь три цвета границы - как на часах:
От 0 до 4 цвет #1 От 4 до 8 цвет #2 От 8 до 12 цвет #3
Я уверен, что это возможно, с элементом , но мне это не удается. Перевод вопроса: Circle with three different border colors @Legionar

Ответ

Вы можете создать границу окружности, разделенную на 3 части с помощью inline svg, используя:
circle element и атрибут stroke-dasharray для разделения окружности на сектора
Ниже пример:
svg{width:30%;height:auto;}
Edit
Для добавления текста внутри окружности, вы можете использовать svg text element
svg{width:30%;height:auto;}
Перевод ответа: Circle with three different border colors@web-tiki