透明边框和盒子阴影问题

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/

以上从左侧产生带有三角形"箭头"的"语音泡沫".箭头是从边框创建的,部分是透明的,部分是不透明的.

我想在讲话泡泡后面使用一个盒子阴影,但这会在箭头周围有点时髦,因为它会从整个元素中掉落一个阴影而不仅仅是不透明的部分.

示例:http://jsfiddle.net/ysqQV/1/

我知道这是正常行为而不是错误,但我希望能够将盒子阴影剪切到箭头的不透明部分.

我不能将单个图像用于语音气泡,因为内容可以是任何高度,我想避免使用拼凑在一起的多个图像,因为这个解决方案更加清晰.

任何人都可以想到一个可行的解决方案吗？

Answer 1

你所追求的是不可能的。不过，我知道一些解决方法：

首先也是最简单的，松开箭头的阴影。看起来还是不错的。

其次，使用图像并烘焙箭头的阴影。可能不理想，但它有效。

第三种选择，只需制作一个 20 x 20 的正方形，使用所有这些样式，然后通过变换旋转它。您将得到一颗钻石，因此下一步是使用蒙版隐藏不需要的边缘。我以前已经这样做过，但在这个过程中肯定会有点模糊，所以我实际上最终选择了第一个选项。如果你不能使用遮罩，你可以将箭头包裹在 div/span 或其他东西中，并将其设置为溢出隐藏。额外的代码，但结果相同。

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

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

希望有帮助:)