Avoiding Overlapping Drop Shadows on Irregular CSS Shapes - html

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