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

Question

[KononovD]

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

С градиентной рамочкой и прозрачным фоном одновременно?

Comments

[Пашенька]

Можно.

[Шохрух Шаймардонов]

like-a-boss, Лайк за соответствующий ответ

Answer 1

[KononovD]

думаю, вот это можно считать ответом:
https://codepen.io/Kononov_D/pen/vYYaEzp?editors=1100

Comments

[Сергей delphinpro]

Не совсем.
Сама полоска заполнения. у нее градиент должен совпадать с градиентом рамки. Т.е. она должна быть всегда 100% ширины, но обрезаться по значению. Проще всего это было бы сделать через clip-path, если бы не поддержка. Еще есть варианты с svg маской и с overflow. В последнем случае нужно еще обертка для полосы.

Но если не придираться, то норм =))

[KononovD]

Сергей delphinpro, в идеале да, полоска должна совпадать с градиентом рамки, но в данном случае не критично, надеюсь)

Answer 2

[Eugene Chefranov]

Comments

[KononovD]

рамка не градиентная

[KononovD]

VicTHOR, я не уверен, что вообще возможно сделать градиентную рамку и прозрачный фон одновременно) по отдельности все просто

[Eugene Chefranov]

KononovD, можно попробовать заюзать border-image или же сделать двумя псевдоэлементами, а внутреннюю линию просто доп. дивом