Question

那里，

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

screenshot 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;
}

正如你所看到的那样，“唯一”的问题是气泡尾部周围的盒子阴影（三角形箭头）。

我也试过不使用之前的＆amp; after-pseudo-classes但是使用第二个div只保存三角形（带有变换，旋转......）但显然这并没有导致我没有成功。

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

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

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

谢谢，

MIK

Answer 1

使用drop-shadow：

enter image description here

也许this article (box-shadow-vs-filter-drop-shadow)会帮助你

Answer 2

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

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

您可以跳到“双框方法”，并使用:before和:after（您已经用完了制作气泡）显示了一种非常手动的方法transform。如果您真的想要这样做，可以将箭头向左浮动并通过伪元素应用阴影。

Answer 3

您应该在CSS的filter中使用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>

享受...

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

3 个答案: