避免在不规则CSS形状上重叠阴影

Question

我正在CSS中创建一个弹出框，该弹出框由一个常规矩形和一个顶部的小标签组成。 我想在弹出框上添加阴影，但无法在选项卡底部隐藏阴影。

请参阅下面的弹出窗口图片：

...以及产生的代码：

.popover-test {
  background-color: #fff;
  border: 1px solid #929292;
  box-shadow: 0 0 10px 1px #929292;
  height: 100px;
  position: relative;
  width: 200px;

  &::before {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content: "";
    height: 20px;
    left: 100px;
    position: absolute;
    width: 50px;
  }
}

如何使投影阴影围绕不规则形状的边界，但如何从顶部选项卡的底部将其删除？

Answer 1

将标签页换成z-index:1; 然后您就可以像这样前后移动您的前后。 您会遇到一些问题，但无法通过一些基本的CSS清理所有问题

https://jsfiddle.net/ptb7n90w/1/

.wrapper {
    z-index:1;
}
.popover-test {
    background-color: #fff;
    border: 1px solid #929292;
    box-shadow: 0 0 10px 1px #929292;
    height: 100px;
    position: relative;
    width: 200px;
}
.popover-test::before {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    top: -10px;
    content:"";
    height: 20px;
    left: 101px;
    width: 50px;
    position: absolute;
    z-index:1;
}
.popover-test::after {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content:"";
    height: 20px;
    left: 100px;
    width: 50px;
    position: absolute;
    z-index:-1;
}