CSS形状不规则，结合阴影

Question

我想组合两个形状及其阴影，以创建如下所示的UI。

在我的尝试中，第一个元素的阴影将与第二个元素重叠。

我是如何通过浏览器实现这项工作的？

HTML

<div class="mainShape">
  <div class="subShape">

  </div>
</div>

CSS

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

https://jsfiddle.net/mk32g7yj/7/

Answer 1

可能有一种更优雅的方式来实现这一点，例如Sumurai建议使用svg，但实现这一目标的一种相当愚蠢的方法可能是坚持使用＆＃34;掩盖＆＃34; div（白色背景）在另外两个div之间：

＆＃13;

＆＃13;

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

.mask {
  position: absolute;
  top:0px;
  right:-20px;
  width:25px;
  height:180px;
  background-color:white;
}

＆＃13;

<div class="mainShape">
  <div class="subShape">

  </div>
  <div class="mask">
  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS box-shadow仅适用于盒子。当你开始组合它们时，事情会变得很难看。我认为最好的解决方案是使用svg创建背景。以下解决方案使用the dropshadow as written by Erik Dahlström。

在这种情况下我使用了多边形，但你可以使用你可能用svg创建的任何形状，甚至是我认为的图像。由于您对宽度和高度进行了硬编码，因此我使用了硬编码坐标。如果需要，没有什么能阻止你动态计算它们。请注意，svg比我们想要提供的阴影要大，并且我不会碰到任何角落。原因显然是因为我们需要绘制阴影。在svg边界之外绘制的东西没有显示出来，所以我们需要确保我们有足够的摆动空间来展示一切。

* {
  box-sizing: border-box;
}

.mainShape {
  position: relative;
  width: 200px;
  height: 600px;
  margin: 15px;
  background: white;
  padding: 5px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  padding: 5px;
  background: white;
}

.background {
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -10px;
  width: 280px;
  height: 620px;
}

<div class="mainShape">
  Text in main shape
  <div class="subShape">
    :-)
  </div>
  <!-- SVG drop shadow using css3: https://stackoverflow.com/a/6094674/2209007 -->
  <svg class="background">
    <filter id="dropshadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
    <feOffset dx="2" dy="1" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5"/>
    </feComponentTransfer>
    <feMerge> 
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <polygon points="10,10 270,10 270,190 210,190 210,610 10,610" style="filter:url(#dropshadow)"/>
  </svg>
</div>