具有透明背景和伪元素的 CSS box-shadow

Question

我有一个 div，我希望它看起来像一个带有框阴影的语音气泡。目前它看起来像这样：

问题是我不知道如何将阴影添加到伪元素“尾巴”。这甚至可能吗？如果我将 box-shadow 添加到伪元素，它看起来像这样，这肯定不是我想要的：

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

JS小提琴

代码：

#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);
    }

小提琴