Как сверстать такой треугольник с градиентом у border?

Question

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

Как сверстать такой блок с треугольником сверху?
Интересует сам треугольник и как его совместить с фоном, чтобы сохранить градиент

Градиент-обводку задаю через маску и псевдоэлемент

border: 1px solid rgba(255,255,255,1)
mask: linear-gradient(110.84deg, rgba(255,255,255,0.4) -1.62%, rgba(255,255,255,0) 43.15%)

Comments

[Александр Варлаков]

Это макет или скрин с сайта?

Если это скрин, то если не сложно - киньте пожалуйста ссылку на сайт, интересно посмотреть

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

Александр Варлаков, это скрин макета Figma

Answer 1

[RAX7]

Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


Второй вариант svg clip-path.
плюсы: можно применить backdrop-filter
минусы: требует js и желательно ResizeObserver