#html #css #html5 #css3 #svg
У меня есть 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 Я уверен, что это возможно, с элементом
Ответы
Ответ 1
Вы можете создать границу окружности, разделенную на 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
Комментариев нет:
Отправить комментарий