避免重複放置不規則CSS形狀上的陰影

Question

我在CSS中創建了一個彈出窗口，該窗口由頂部的一個常規矩形和一個小選項卡組成。我想爲popover添加陰影，但無法在選項卡底部隱藏陰影。

見下酥料餅的形象：

...和代碼生成：

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