Как сверстать такой элемент?

Question

[Илья Петров]

Как можно сверстать такие карточки?

Дизайнер задал всему фону цвет rgba(255,255,255,0.1)
Фон у карточки rgba(255,255,255,0.1)

У элементов присутствует прозрачность, также у блока есть свечение слева снизу.

Я уперся в то, что не могу задать border градиентом. Задаю его через псевдоэлемент карточки, который находится за ее фоном. Но в таком случае нужно перекрашивать карточку в цвет без прозрачности.
Хотелось бы узнать есть ли варианты, как можно сверстать такой border и при этом сохранить прозрачность фонов

Comments

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

Помню времена, когда такое через png делали.

[Илья Петров]

Сергей Сергей, как при использовании png сохранить масштабирование и не делать отдельную картинку для каждой карточки?

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

background-size, no-repeat, border-radius Npx, а отдельно только иконки. Но тогда и "адаптивности" было меньше.

Answer 1

[RAX7]

Для полупрозрачного уголка можно css-masks использовать, либо просто вставить svg как data-url в background-image

Comments

[Ankhena]

Чуть-чуть упростила ваш вариант
https://codepen.io/AnnaSummer/pen/OJQMMMw

[RAX7]

Ankhena, супер! гораздо лучше стало. Но svg.products__bg зря убрала, там же не простое скругление уголков, а "специальное дизайнерское"=)

[Ankhena]

RAX7, это я, видимо, сослепу

Answer 2

[Антон Шаманов]

https://impuls-web.ru/kak-zadat-gradient-dlya-bord...

Comments

[Илья Петров]

Все круто, но есть нюанс – не работает border-radius

[Антон Шаманов]

Илья Петров, где именно? вроде все ок https://codepen.io/ananyaneogi/pen/mdPbJZO

[Илья Петров]

Антон Шаманов, в твоём примере border radius и градиент реализуют через псевдоэлемент.

Такой вариант не подходит, потому что фон карточки прозрачный

[Илья Петров]

Антон Шаманов, пока что более менее решение – svg градиента и использовать через background image, не border-image