Avoiding Overlapping Drop Shadows on Irregular CSS Shapes

Question

I am creating a popover in CSS which is made up of a regular rectangle and a small tab at the top. I am wanting to add a drop shadow to the popover, but can not get the shadow at the bottom of the tab to hide.

See image of popover below:

... and the code to produce:

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

How can I keep the drop shadow around the border of the irregular shape, but remove it from the base of the tab at the top?

Answer 1

Wrap the tab in something with z-index:1; and then you can move your before/after behind and on top like this. You will get some issues, but nothing that can't be cleaned up with some basic 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;
}