Страницы

Поиск по вопросам

воскресенье, 16 февраля 2020 г.

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

#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 Я уверен, что это возможно, с элементом , но мне это не удается. Перевод вопроса: Circle with three different border colors @Legionar


Ответы

Ответ 1



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

Комментариев нет:

Отправить комментарий