自定义形状周围的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