Как сделать вот такой блок?

Question

[Марина]

как сделать оранжевую полоску?

Comments

[Сергей Сергей]

круглые границы у псевдо-элемента, который трансформируется translate-skew-rotate, коэффициенты подбирать до умопомрачения.

Answer 1

[Ankhena]

1. SVG
2. conical gradient, но на данный момент нет поддержке в не вебкитах.
3. 2 псевдоэлемента. На одном дуга в четверть круга, второй перекрывает честь этой дуги.

Мне больше всего нравится последний вариант.
https://jsfiddle.net/zquwg2sy/

Answer 2

[Ragtime Kitty]

SVG

Answer 3

[Андрей Гончаров]

Я бы наложил svg в виде дуги абсолютно.

Comments

[Марина]

а можно как-то через css реализовать? не правя html

[Андрей Гончаров]

Марина, не могу придумать как так трансформнуть элемент на css.

[Lord_Dantes]

Марина, псевдо-элементом сделать дугу.

[Lord_Dantes]

Марина, или сделать ровную линую и изогнуть с помощью transform

[Марина]

Slava, можете показать на примере?

[Андрей Гончаров]

Slava, мне интересно, как можно на css нарисовать дугу отличную от 90 градусов. Возможно нарисовать дугу 90 градусов, ее повернуть немного, а вторым псевдоэлементом белым перекрыть ее часть. Но это такой костыль)

[Андрей Гончаров]

Марина, Я бы все равно остановился на наложении svg или картинки - не важно. Можно эту картинку как бекграунд псевдоэлемента в css вставить. Даже в base64 виде, если совсем никак не закинуть файл на сервер.

[Lord_Dantes]

Андрей Гончаров, чуть позже покажу как

Answer 4

[Goog_codeman]

Свг в помощь