CSS框阴影围绕自定义形状？

Question

那里,

我需要创建一个看起来像这样的div:

截图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-&after-pseudo-classes,但是使用第二个div只保存三角形(带有变换,旋转......)但显然这并没有导致我没有成功.

静态图片不是选项,因为矩形本身的大小和尾部的位置都是动态的,并且可以在"运行时"期间改变.

我也提出了一个解决方案,我用动态生成的svg创建边框和阴影.如果找不到其他选项,我会坚持使用这个解决方案,但感觉非常强大,就像"黑客"一样.我不是在这里发布这个解决方案,因为它涉及2个javascript-framworks(extjs和raphael),这个问题应该是关于html&css.尽管如此,如果有人对它感兴趣,我仍然可以提供它...

最后一件事:浏览器兼容性并不是什么大不了的事.如果它在最新版本的大版本(firefox,chrome,opera,即10,...)中工作,一切都很好;)

谢谢,

MIK

Answer 1

使用投影:

也许这篇文章(box-shadow-vs-filter-drop-shadow)会对你有帮助

Answer 2

filter您应该在 CSS 中使用 from ，然后设置该drop-shadow($yourshadow)函数的值。filter: drop-shadow($yourshadow)为函数或shadow: $yourshadow作为属性编写影子没有区别。你可以像下面这样写：

.shape1, .shape2{
  transform: rotate(35deg);
  background: yellow;
  height: 100px;
  width: 100px;
  display: inline-block;
}

.myshape{
  margin: 30px;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}

<div class="myshape">
  <div class="shape1"></div>
  <div class="shape2"></div>
</div>

享受...

Answer 3

这样做可能不符合你的最佳利益,我会保持原样.

http://css-tricks.com/triangle-with-shadow/

您可以跳到"双盒方法",它显示了一个非常手动的方法,使用:before和:after(你已经用完了制作泡泡)的帮助transform.如果你真的想这样做,你可以将箭头浮动到左边,并通过伪元素应用阴影.