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

Question

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

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

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

代码：

#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 as the background in this case is transparent( this cannot be changed as the final background is an image and not a solid color) and the pointer slopes on one side only. This is how the solution to that question looks like with transparent background: http://jsfiddle.net/mek5Z/2140/

Answer 1

不允许我发表评论，所以不得不写这篇文章，但也许这些参考资料会有所帮助。

CSS Speech Bubble with Box Shadow

和

How to Create CSS3 Speech Bubbles Without Images

Answer 2

我已经成功得到了这个结果，但是还需要优化：

<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

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

CSS box-shadow with transparent background and pseudo elements

html

css

pseudo-element

css-shapes