Как сделать нестандартный бордер через фоновый градиент?

Question

[olya095]

Comments

[Ankhena]

Через border-image.
Либо псевдоэлементами.
Либо просто фонами градиентом.

Что именно у вас не получилось?

[olya095]

Ankhena, https://jsfiddle.net/smekdr49/

[olya095]

Ankhena , но суть в том, что border-image не подходит в задаче
и псевдо тоже

[Ankhena]

olya095,

но суть в том, что border-image не подходит в задаче
и псевдо тоже

По какой причине?

Answer 1

[RAX7]

Comments

[olya095]

RAX7 , если число 8 менять - то вроде будет неравномерно
https://jsfiddle.net/1b6m3fhq/

[olya095]

RAX7 , неравномерная ширина бордера

[olya095]

RAX7 , https://jsfiddle.net/4h9e1x0y/

[RAX7]

olya095, не вижу, в каком именно месте неравномерная?

[olya095]

RAX7, а так?
https://jsfiddle.net/b9cumwp5/

[olya095]

RAX7, может кажется, я не знаю. простите)

[RAX7]

olya095, возможно из-за того, что масштаб в браузере не 100%.
Можно еще вот так сделать https://jsfiddle.net/0azLsvgm/ , без использования cacl должно получаться ровнее даже при изменённом масштабе.

[olya095]

RAX7, сейчас у меня тоже не так. Возможно, проблема в пк? масштаб 100%

[RAX7]

olya095, ¯\_(ツ)_/¯

[olya095]

RAX7, с планшета вроде ок
на другом пк тоже

а можно сделать, чтобы оно его немного размывало?
в том плане, что сейчас оно идет жестко

Answer 2

[Олег Барабанов]

Свойства border-image и linear-gradient. Пример на codepen