Совместите два элемента с помощью фонового фильтра: blur ()

Question

Когда вы выравниваете два элемента с backdrop-filter: blur(), вы (естественно) получаете уродливую линию посередине. Тем не менее, два таких элемента рядом друг с другом могут быть желательны, когда вам нужны более сложные формы, чем простой квадрат. Как два элемента могут выстроиться в линию без создания такой уродливой линии?

Предупреждение. Это работает только в Chrome с включенными экспериментальными функциями веб-платформы и, возможно, в Safari и Edge 17.

div {
  position: relative;
  width: 400px;
}
.cover {
  background: rgba(0,0,0,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 50%;
  z-index: 1;
}
#left {
  left: 0px;
  top: 10px;
}
#right {
  right: 0px;
  bottom: 10px;
}

<div>
  <div id="left" class="cover"></div>
  <div id="right" class="cover"></div>
  <img src="https://www.google.com/google.jpg">
<div>

Answer 1

Вместо решения clip-path, предоставляемого @Vals, вы можете использовать несколько градиентов, например:

.container {
  position: relative;
  display:inline-block;
  padding:20px;
}
.container:before {
  content:"";
  background:
  linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))0 20px/50% 100% no-repeat,
  linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))100% -20px/50% 100% no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left:0;
  right:0;
  z-index: 1;  
}

<div class="container">
  <img src="https://www.google.com/google.jpg">
<div>

Answer 2

Поскольку вы уже ограничены веб-набором, возможно, вы можете воспользоваться клип-путем. Используйте один элемент обложки и придайте ему желаемую форму.

div {
  position: relative;
  width: 800px;
}
.cover {
  background: rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 50%;
  z-index: 1;
  -webkit-clip-path: polygon(50% 10%, 50% 0%, 100% 0, 100% 90%, 50% 90%, 50% 100%, 0 100%, 0% 10%);
}

<div>
  <div class="cover"></div>
  <img src="https://www.google.com/google.jpg">
</div>