i creating popover in css made of regular rectangle , small tab @ top. wanting add drop shadow popover, can not shadow @ bottom of tab hide.
see image of popover below:
... , code 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 keep drop shadow around border of irregular shape, remove base of tab @ top?
wrap tab in z-index:1; , can move before/after behind , on top this. issues, nothing can't cleaned 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; } 