создать тени для нескольких элементов на одном уровне, но без перекрытия?

Question

Я хочу создать что-то вроде следующего снимка экрана, но я не могу определить какое-либо значение z-index, для которого тень не появляется ни над первым, ни над вторым блоком (они всегда складываются либо с первымсверху или вторым).

Есть ли способ добиться следующего?

body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px 
black; margin: auto; position: relative; }
#box-one { left: -50px; z-index: 1; }
#box-two { right: -50px; z-index: 1; }

https://codepen.io/eoghanmurray/pen/oVEEVK

Answer 1

Если вы можете использовать filter и drop-shadow, тогда вы можете применить тень к контейнеру.Эта тень отличается тем, что соответствует альфа-каналу изображения (в данном случае - контуру содержимого) вместо простого прямоугольника:

body {
  background: darkgrey;
  padding-top: 50px
}

#box-one,
#box-two {
  background: white;
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
}

#box-one {
  left: -50px;
  z-index: 1;
}

#box-two {
  right: -50px;
  z-index: 1;
}

#top {
  filter: drop-shadow(0 0 20px black);
}

<div id="top">
  <div id="box-one"></div>
  <div id="box-two"></div>
</div>

Answer 2

Вы можете рассмотреть drop-shadow фильтр для родительского элемента:

body {
  background: pink;
}

.b1,
.b2 {
  width: 150px;
  height: 150px;
  background: #fff;
}

.b2 {
  margin-left: 100px;
}
.container {
  filter:drop-shadow(0 0 10px #000);
}

<div class="container">
  <div class="b1"></div>
  <div class="b2"></div>
</div>

Или используйте дополнительный элемент, чтобы скрыть перекрывающиеся тени:

body {
  background: pink;
}

.b1,
.b2 {
  width: 150px;
  height: 150px;
  background: #fff;
  box-shadow: 0 0 13px #000;
  position: relative;
}

.b2 {
  margin-left: 100px;
}

.b1:before,
.b2:before {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0;
  left: 0;
  height: 15px;
  background: inherit;
  z-index: 1;
}

.b2:before {
  top: 0;
  bottom: initial;
}

<div class="container">
  <div class="b1"></div>
  <div class="b2"></div>
</div>

Вы также можете построить это, используя только один элемент:

body {
  background: pink;
}
.container {
  width:250px;
  height:300px;
  background:
     linear-gradient(#fff,#fff) top left,
     linear-gradient(#fff,#fff) bottom right;
   background-size:150px 150px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 10px #000);
}

<div class="container">
</div>

Answer 3

Я создаю новый div и задаю для него css.

body { background: darkgrey; padding-top: 50px}
div { background: white;  width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; }
#box-one { left: -50px; }
#box-two { right: -50px;  }
#div1{
  position:absolute;
  background: white;
  width:100px;
  height:15px;
  margin-right:10px;
  box-shadow: none;
  margin-top:185px;
  margin-left:199px;
  content: '';
  z-index: 1
 

}

<div id="div1"></div>
<div id="box-one"></div>
<div id="box-two"></div>