Css 引导导航栏中重叠的Dropshadow。那'；太糟糕了

在引导导航栏中，我尝试创建两个项目，它们的投影相互相交。

目前看起来是这样的：

但我希望它看起来像这样：

有人知道如何做到这一点（最好使用CSS）

.navbar内部{
盒影：0px 4px 8px#8888888；
}
.navbar品牌{
背景：#f8f8；
宽度：160px；
高度：160px；
边界半径：50%；
位置：绝对位置；
盒影：0px 10px 8px#8888888；
利润上限：-25px；
填充顶部：29px；
左侧填充：29px；
}

我的产品
切换导航

您可以创建一个伪元素，该元素将位于圆圈后面，颜色和高度与导航栏相同

你必须对定位进行数学计算，但它是有效的

.navbar-brand:before{
  /* bigger than the circle to mask the shadow 1*/
  width:200px;
  /* same height as navbar */
  height:50px;
  content:".";
  overflow:hidden;
  text-indent:99999px;
  display:block;
  background: #F8F8F8;
  position: absolute;
  /* cause your div has margin -25px */
  top:25px;
  /* so it will mask everything on the sides */
  left:-15px;
}
.navbar-brand > * {
  /* everything inside the navbar brand need to have its positioning set */
  position: relative;
}

---

太棒了，谢谢！我会等一天，看看是否有人能想出更好的办法，但这是一个很棒的解决方案。非常感谢。再次感谢@teefars我真的很感激你的想法。