CSS不规则形状，结合阴影

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

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

你知道我该怎么做吗，跨浏览器

HTML

---

可能有一种更优雅的方法可以做到这一点，例如Sumurai建议使用svg，但实现这一点的一种相当粗糙的方法可能是在其他两个div之间粘贴一个“掩蔽”div（带有白色背景）：

.mainShape{
位置：相对位置；
盒影：6px21px-3pxRGBA（86,93111,0.12）；
背景：白色；
宽度：200px；
高度：600px；
}
.亚形{
位置：绝对位置；
顶部：0px；
右：-60px；
宽度：60px；
高度：180像素；
盒影：6px21px-3pxRGBA（86,93111,0.12）；
}
.面具{
位置：绝对位置；
顶部：0px；
右：-20px；
宽度：25px；
高度：180像素；
背景色：白色；
}

---

CSS框阴影仅适用于框。当你开始把它们结合起来时，事情就会变得糟糕。我认为，最好的解决方案是使用svg创建背景。下面的解决方案使用

在本例中，我使用了多边形，但您可以使用svg创建的任何形状，甚至可以使用我认为的图像。因为您硬编码了宽度和高度，所以我使用了硬编码坐标。如果需要的话，没有任何东西可以阻止您快速计算它们。请注意，svg比我们想要为其提供dropshadow的元素更大，并且我不接触任何角落。原因很明显，因为我们需要画阴影。在svg边界之外绘制的内容不会显示，因此我们需要确保有足够的摆动空间来显示所有内容

*{
框大小：边框框；
}
.mainShape{
位置：相对位置；
宽度：200px；
高度：600px；
利润率：15px；
背景：白色；
填充物：5px；
}
.亚形{
位置：绝对位置；
顶部：0px；
右：-60px；
宽度：60px；
高度：180像素；
填充物：5px；
背景：白色；
}
.背景{
位置：绝对位置；
z指数：-1；
顶部：-10px；
左：-10px；
宽度：280px；
高度：620px；
}

主形状的文本
:-)
< /代码>您可能想考虑使用SVG作为背景。另一个解决方案是通过在阴影后面有一个纯色元素，并设置其不透明度，来获得“锐利”的边缘阴影。
<div class="mainShape">
  <div class="subShape">

  </div>
</div>

.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);
}