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

Question

[Игорь Луговской]

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

spoiler

Ожидаемый результат

spoiler

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

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

Буду очень признателен за помощь!

Comments

[Вадим]

jsfiddle за vpn в рф.
Сейчас эффективнее выкладывать на codepen

На вид вам нужен backdrop-filter: blur

[Игорь Луговской]

Вадим, да если бы не нужно было делать фигурный бордер с помощью clip-path то оно бы сработало .

[Вадим]

Игорь Луговской, так оно работает вместе

[Игорь Луговской]

Вадим, дело в том что такой бордер сделан из двух блоков
1. задний блок
2. блок который на 1px меньше заднего и содержит контент

Может есть еще способ сделать многогранный бордер ?

[Вадим]

Игорь Луговской, да, поменяйте блоки. Нижний, прозрачный с контент ом, и поверх(хотя можно и под низ) для границы. У клип пас есть свойство, позволяющее вырезать одновременно и снаружи и изнутри. Сейчас не у пк, если завтра буде. Ещё актуально - сделаю демку.
Еще думаю через border image можно попробовать рамку сделать

[Человек]

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

[Игорь Луговской]

Вадим,  Буду благодарен :)

Answer 1

[Вадим]

Не идеально, но что-то типа того (координаты надо подправить у псевдо clip-path).
clip-path у контейнера и его псевдоэлемента на половину одинаковый. Собственно, та часть, которая создаёт "внешнюю" обрезку. А вторая часть clip-path у псевдоэлемента создана для "внутренней" обрезки, и чтобы это сработало используется опциональный аргумент evenodd.

Comments

[Игорь Луговской]

Класс!
Спасибо большое