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

Question

[vikas_web]

вместо 54 может быть абсолютно любое значение

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/QWMoQjj

Comments

[vikas_web]

Андрей Федоров, спасибо, а цельну дугу я могу добавить еще ? белую ( как на скрине)
и перенести 54% из css задание в html

https://jsfiddle.net/yxwb0nsu/1/

[Андрей Федоров]

vikas_web, дак border-же. а в html можно перенести используя атрибут style в нужных тегах.

[vikas_web]

Андрей Федоров, почему то сьежает https://jsfiddle.net/yxwb0nsu/2/
если враппперу то тоже не по макету

[Андрей Федоров]

vikas_web, ну а где же box-sizing: border-box;?

[vikas_web]

Андрей Федоров, допустим) а ширину красного блоку могу регулировать? пробовала - вроде нет

[Андрей Федоров]

vikas_web, ну, а почему нет? https://codepen.io/aliencash/pen/gOxEeOr

[vikas_web]

Андрей Федоров, attr не так использую? или подход не правильный https://jsfiddle.net/rpkaxyve/

[Андрей Федоров]

vikas_web, attr() не верно используете. https://jsfiddle.net/6bw53tz0/

[vikas_web]

Андрей Федоров, простите, а что поменялось в вашем варианте?

[Андрей Федоров]

vikas_web, https://jsfiddle.net/f3p1kmLo/1/

[vikas_web]

Андрей Федоров, а если дуга внутри?
возможно сделать без картинок?

[Андрей Федоров]

vikas_web, ну конечно. серый фон - это background-color для div, синий цвет - это background-image.

[vikas_web]

Андрей Федоров, тут оно выносится https://jsfiddle.net/f3p1kmLo/1/

[Андрей Федоров]

vikas_web, ну где выносится-то? вы же ничего не сделали... https://jsfiddle.net/dgcz9xfo/

[vikas_web]

Андрей Федоров, имела ввиду это https://jsfiddle.net/gm8L6fkj/
ломается

[Андрей Федоров]

vikas_web, судя по всему вы не понимаете зачем в css то или иное свойство. разберитесь что делает мой код, как он работает, потом задавайте вопросы

[vikas_web]

Андрей Федоров, поуменьшала всё
теперь хочу сделать красный блок еще меньше - ломается

https://jsfiddle.net/d4b5q6xo/

[Андрей Федоров]

vikas_web, разбирайтесь дальше. это очень простой код, там нет никаких хаков и трюков.

[vikas_web]

Андрей Федоров, вроде получилось
но на скрине они закругленные
так получится ? только свг?

https://jsfiddle.net/u9nkxye2/

[Андрей Федоров]

vikas_web, с моим способом вы вряд ли сможете это реализовать. грубо говоря, вам нужно наложить радиальный фон в виде двух маленьких кружков в начале и в конце конического градиента. если с позицией начала проблем нет, то с позицию конца рассчитать на css трудно, если не невозможно.

Answer 2

[ThunderCat]

jsfiddle.net/jonathansampson/7PtEm