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

Question

我有一个 div，我希望它看起来像一个带有框阴影的对话泡泡。目前它看起来像这样:

问题是我不知道如何将阴影添加到伪元素“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