Как задать градиент бордеру?

Question

[Young11]

Подскажите , делаю дерево панелей блоков , и хотел бы сделать , чтобы у бордера был градиент , нашел вроде бы один способ , но он как я понимаю работает с linear-gradient у которых мало в нутри параметров цветов , а если и делать из двух цветов допустим , то border-radius: 25px 0 0 0; перестает работать и делает закругление острым углом , есть еще какие нибудь
решения ?

Comments

[Ankhena]

Подложить псевдо с градиентом.
https://sitist.ru/gradient-border.html

Answer 1

[Виталий Першин]

Весь фокус в этом:

border: 1px solid transparent;
background: linear-gradient(#e5e2e2, #e5e2e2 0) padding-box,
linear-gradient(90deg, #fa5560, #4d91ff) border-box;

Comments

[Young11]

мне надо именно мой градиент linear-gradient(116deg, rgba(139, 178, 26, 0.30) 0%, rgba(0, 102, 53, 0.30) 100%), linear-gradient(116deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%); повестить на .qwe::before , на вот это боковую полоску

[Виталий Першин]

Young11, Ну тогда как вариант так, принцип тот же:

[Young11]

Виталий Першин, извиняюсь за пинг , я обновил код пен , не подскажите как убрать этот белый промежуток от блока до before ?

[Виталий Першин]

Young11, В этом примере никак, в этом вся фича

[Young11]

Виталий Першин, понял , тогда можете подсказать что можно бы почитать/посмотреть чтобы самому делать такие изгибы допустим при помощи векторов или не знаю свг или же есть какие нибудь библиотеки для этого ?

[Виталий Першин]

Young11, Зависит от задачи. В контексте вашего вопроса, если фон однотонный, то можно белое заполнение заменить на цвет фона. В остальном можно и SVG попробовать и маску. Библиотеки есть, но так чтобы они еще градиентом были, не видел.