透明边框和阴影的问题

Question

请看以下内容：

考虑以下事项：

HTML

<div class="info_bubble">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare ligula et nulla auctor vitae tincidunt erat congue.</p>
</div>

CSS

.info_bubble {
    padding: 0 15px;
    margin: 1em 0 3em;
    border: 5px solid #FFF;
    background: #A6CE39;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0 0 10px #000;
    color: #FFF;
    position: absolute;
    left: 50px;
    top: 50px;
}

.info_bubble::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 10px;
    bottom: auto;
    left: -23px;
    border-width: 15px 23px 15px 0;
    border-color: transparent #FFF;
}

.info_bubble::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 16px;
    bottom: auto;
    left: -15px;
    border-width: 9px 15px 9px 0;
    border-color: transparent #A6CE39;
}​

一个例子：http://jsfiddle.net/ysqQV/2/ 上述示例生成了一个带有三角形“箭头”的“对话框”，箭头由边框创建，一部分透明，一部分不透明。

我想在对话框后面使用 box-shadow，但是当它从整个元素而不仅仅是不透明部分投下阴影时，这会变得有点混乱。

例如： http://jsfiddle.net/ysqQV/1/ 我知道这是正常行为，不是错误，但我很想能够将 box-shadow 剪切到箭头的不透明部分。

我无法使用单个图像作为对话框，因为内容的高度可能是任意的，我希望避免使用多个拼接在一起的图像，因为这种解决方案要好得多。

有人能想出可行的解决方法吗？

- Turnip

---

也许只需要一个小图像来表示箭头？ - VDP

Answer 1

使用drop-shadow滤镜:

filter: drop-shadow(0 0 30px #333);

- Jake

---

它的运行很好，但对于小盒子来说，30像素太高了。不管怎样，谢谢你。 - Nader

Answer 2

您想实现的效果不可能。但是我知道几个解决方法：

首先，最简单的方法就是去掉箭头的投影，它仍然看起来很好。

其次，使用图像并嵌入箭头的投影。这可能不是理想的解决方案，但它确实可以使用。

第三个选项是创建一个20 x 20的正方形，并应用所有这些样式，然后使用transform旋转它。你将得到一个菱形，下一步是使用蒙版隐藏您不需要的边缘。我以前做过这个，但在过程中肯定会有点模糊，所以我最终选择了第一种方法。如果您不能使用蒙版，则可以将箭头包装在div / span或其他元素中，并将其设置为溢出隐藏。这会增加一些代码，但效果相同。

如果您需要，我可以提供最后一种选项的示例，但要到今晚我才有机会。

个人而言，我会选择第一种选项。

希望这有所帮助 :)

- will

---

我最终稍微调整了设计，使箭头位于一个较暗的区域，并去掉了盒子阴影。虽然不是理想的，但看起来还可以。 - Turnip

Answer 3

很晚了，但我已经使用了你的代码让我的网站工作。所以，我在这里分享它。

它只需要在HTML中添加一个额外的链接和一些CSS更改：

<div class="arrow_mask"></div>

http://jsfiddle.net/ysqQV/123/

- Hamid Sarfraz