Css 如何将阴影应用于由两个div组成的拱形多边形

我需要为一个整体多边形应用长方体阴影。多边形实际上是由两个div组成的，拱形框本身就是一个div。从图像的阴影效果可以看出，请注意较大div的阴影如何与覆盖div的嵌入阴影重叠。有没有办法使阴影看起来更均匀并作为一个整体混合在一起

总体框的样式：

box-shadow: 0 5px 20px 0 rgba(50, 50, 50, 0.75) inset

较大div的样式：

box-shadow: 0 5px 30px 0 rgba(50, 50, 50, 0.75)

谢谢

---

我想答案应该是这样的：

#base {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    box-shadow: 0 5px 30px 0 rgba(50, 50, 50, 0.75);
}
#box {
    width: 100px;
    height: 100px;
    bottom: 0px;
    position: absolute;
    left: 50px;
    box-shadow: 0 5px 20px 0 rgba(50, 50, 50, 0.75) inset;
}
#box:after {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: -20px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255,0), rgba(250, 250, 250, 0.75) 10%,rgba(250, 250, 250,0.75) 90%, rgba(255, 255, 255,0));
}

在我试图复制您的布局的第一个样式中，我希望它或多或少是准确的

然后我创建一个伪元素，定位在问题区域。在这个伪元素中，我设置了一个背景，背景是从边界的白色透明到中心的轻微灰色的渐变。这样，我就可以在边框中看到阴影，并在中心设置我想要的颜色

它并不完美，但它证明了这一点

它应该是什么样子也是一个品味的问题；我不知道你到底在找什么

---

不管怎样，使用颜色停止，我认为你可以得到你想要的东西

你能发布一些代码吗，JSFIDLE？需要html来正确回答这个问题。这个问题会产生很多问题，但我最好的猜测是创建一个到顶部元素的包装器，该包装器将创建边框，然后菜单元素将需要一个底部边距：-50px；用#fff背景覆盖另一个阴影。使用css:before和：after，两个项目也可以是一个相同的项目，然后将阴影插入应用到该项目上