Как сделать элемент с прозрачным фоном и фигурным border?

Как сделать элемент с прозрачным фоном и фигурным border ?
Текущий результат
spoiler
6388a6855356d579117455.png


Ожидаемый результат
spoiler
Screenshot-2022-12-01-at-15-06-35.png


Я использовал clip-path для реализации бордера, но проблема в прозрачности фона.

Текущий код
https://jsfiddle.net/gosha_olegovich/s7o1v93y/6/

Буду очень признателен за помощь!
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Не идеально, но что-то типа того (координаты надо подправить у псевдо clip-path).
clip-path у контейнера и его псевдоэлемента на половину одинаковый. Собственно, та часть, которая создаёт "внешнюю" обрезку. А вторая часть clip-path у псевдоэлемента создана для "внутренней" обрезки, и чтобы это сработало используется опциональный аргумент evenodd.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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