自定義形狀周圍的CSS框陰影？

我需要創建一個div它看起來像這樣：

screenshot http://imageshack.us/a/img19/8223/bubblep.png

我所想出到目前爲止是這樣的： http://jsfiddle.net/suamikim/ft33k/

.bubble { 
    position: relative; 
    width: 80px; 
    height: 160px; 
    border: 1px solid #33A7F4; 
    border-radius: 9px; 
    margin: 100px; 
    -webkit-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -moz-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -ms-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -o-box-shadow: 0px 0px 20px 2px #33A7F4; 
    box-shadow: 0px 0px 20px 2px #33A7F4; 

} 

.bubble:after, .bubble:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 17px solid transparent; 
    right: 100%; 
} 

.bubble-left:before { 
    border-top-color: #33A7F4; 
    border-right-color: #33A7F4; 
    top: 60px; 
} 

.bubble-left:after { 
    border-width: 16px; 
    border-top-color: black; 
    border-right-color: black; 
    top: 61px; 
}

正如你所看到的，「唯一」的問題是泡沫尾部（三角箭頭）周圍的陰影。

我也試過不使用before-&之後的僞類，但使用第二個div只保存三角形（與轉換，旋轉，...），但很明顯，這並沒有導致我沒有任何成功。

靜態圖片是沒有選擇的，因爲矩形本身的大小和尾部的位置都是動態的，並且可以在「運行時」期間更改。

我也想出了一個解決方案，我用動態生成的svg創建邊界&陰影。如果找不到其他選項，我會堅持使用此解決方案，但感覺像「黑客」一樣強大。我不在這裏發佈這個解決方案，因爲它涉及2個JavaScript-framworks（extjs & raphael），這個問題應該是關於HTML & css。儘管如此，如果有人對它感興趣，我仍然可以提供它...

最後一件事：瀏覽器兼容性並不是什麼大事。如果它工作在大的（火狐，Chrome，歌劇，即10，......），一切都很好的最新版本;）

感謝，

MIK

來源

2012-10-12 suamikim