具有透明背景和伪元素的CSS盒子阴影

Question

我有一个div，我想看起来像一个带有盒子阴影的讲话泡泡。目前它看起来像这样：

问题是我无法弄清楚如何将阴影添加到psuedo元素“tail”。这甚至可能吗？如果我将box-shadow添加到伪元素，它看起来像这当然不是我想要的：

我真的很感激任何指导。感谢

JS Fiddle

代码：

#container {
  height: 500px;
  background-color: #Febb68;
  padding: 30px;
}
#bubble {
  height: 200px;
  width: 200px;
  padding: 50px 60px 0;
  position: relative;
  z-index: 10;
  border-radius: 30px 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 1px #944;
  margin-bottom: 55px;
}
#bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(255, 255, 255, 0.85);
  border-right: 85px solid transparent;
  border-left: 0px solid transparent;
}

<div id='container'>
  <div id='bubble'>
    ABC
  </div>
</div>

编辑：这个问题与CSS Speech Bubble with Box Shadow不同，因为在这种情况下背景是透明的（这不能改变，因为最终的背景是图像而不是纯色），指针只在一侧倾斜。这就是透明背景的问题解决方案：http://jsfiddle.net/mek5Z/2140/

Answer 1

我已成功获得此结果，但需要进行优化：

<div id='bubble' class="filter-drop-shadow">

.filter-drop-shadow {
    -webkit-filter: drop-shadow( 0 10px 1px #944);
    -moz-filter: drop-shadow(0 10px 1px #944);
    filter: drop-shadow(0 10px 1px #944);
    }

fiddle

Answer 2

不能让我发表评论，所以不得不写这个，但也许这些参考会有所帮助。

CSS Speech Bubble with Box Shadow

和

How to Create CSS3 Speech Bubbles Without Images