39

嘿那里，

我需要创建一个如下所示的 div：

截屏

到目前为止我想出的是：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;
}

如您所见，“唯一”的问题是气泡尾部周围的盒子阴影（三角形箭头）。

我也尝试过不使用之前和之后的伪类，而是使用第二个 div，它只包含三角形（带有变换、旋转等），但显然这并没有导致我没有成功。

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

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

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

谢谢，

米克

4

3 回答 3

45

使用投影：

在此处输入图像描述

在此处输入图像描述

也许这篇文章（box-shadow-vs-filter-drop-shadow）会帮助你

于 2012-10-12T09:29:03.133 回答
6

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

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

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

于 2012-10-12T09:08:26.720 回答
4

你应该filter在你的 CSS 中使用 from 然后drop-shadow($yourshadow)为 value 设置函数。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>

享受...

于 2019-07-24T04:07:35.517 回答