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

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

Градиент-обводку задаю через маску и псевдоэлемент
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%)


628a9d68a2bc9142733944.png
  • Вопрос задан
  • 191 просмотр
Решения вопроса 1
RAX7
@RAX7
Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы