Как сделать прозрачный бордер?

Question

[Lara B]

Как можно реализовать вот такой прозрачный бордер? Буду благодарна за любую подсказку

Comments

[Aetae]

У тебя ещё и блюр сквозь bg, тут без filter не обойтись.

Предварительно тут нужен кастомный svg backdrop-filter:
Накладываем feGaussianBlur.
Режем дырку и вокруг feComposite.
Делаем 1px границы через feDropShadow.

Дизайнер конечно разошёлся.

[Lara B]

Aetae, спасибо большое за наводку. Я в итоге просто сохранила через svg фон карточки. Конечно это костыльное решение, под конкретное количество текста справа от иконки, но я больше ничего не придумала

[Lara B]

Вот на такую заголовку буду располагать контент: иконка слева, тексто справа С адаптивом, конечно, придется поковыряться :(

[Ankhena]

Lara B, https://jsfiddle.net/Ankhena/kLr7onyb/3/
дырочки можно на основе вот этого.
Обводка - тоже, тенью.

[Lara B]

Ankhena, супер! То, что надо, спасибооооо!!! Отметила бы ,как решение ваш вариант

[Lara B]

Ankhena, я сделала это!!!!!! Спасибо!!!!!

[Ankhena]

Lara B, так выкладывайте скорее в решения!

[Lara B]

Ссылка на решение , как на чистом css вырезать круг или бублик в блоке.
Если понять как это работает, то можно делать очень крутые вещи :)
Спасибо Ankhena за подсказку
https://codepen.io/Lareta/pen/WNLRmbL?editors=1100

[Aetae]

Ankhena, drop-shadow поверх mask не ложится, т.е. нельзя будет задать границу для дырки, потому я и ушёл в сторону полноценного svg-фильтра.
Конечно можно отдельно псевдоэлементом нарисовать, но это уже не так красиво как "одним росчерком пера".:)

[Ankhena]

Aetae, у меня маска и тень у разных элементов. Не то чтобы мне прям нравилось это решение.. Но можно заменить на псевдо.

[Aetae]

Ankhena, тогда filter на родителе убьёт backdrop-filter на рёбёнке.:)

Answer 1

[Константин]

Вот идея как можно сделать:

<div>
<div id='parent'></div>
<div class='child'></div>
</div>

body {
  background: url('https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg');
    
}

#parent {
  position:absolute;
  background: blue;
  width: 200px;
  height: 200px;
}

.child {
  position:absolute;
  z-index:100;
  top:80px;
  left:80px;
  background: blue;
  width: 60px;
  height: 60px;
  border-radius:50%;
}

let precision = 64;
let radius = 25;
let c = [...Array(precision)].map((_, i) => {
  let a = -i/(precision-1)*Math.PI*2;
  let x = Math.cos(a)*radius + 50;
  let y = Math.sin(a)*radius + 50;
  return `${x}% ${y}%`
})

document.getElementById('parent').style.clipPath = 
 `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`;

Вот результат этого кода

Comments

[Lara B]

Спасибо за помощь! Буду пробовать. Тоже думала про clipPath Но надеялась, что чисто css можно сделать через mix-blend-mode

[Aetae]

Жесть ты наркоман. clip-path поддерживает собственно кроме polygon ещё и path, где всё можно парой кривых нарисовать...