透明边界和箱阴影愁楚

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/

我知道这是正常的行为，而不是一个错误，但我希望能够以剪裁框阴影箭头的不透明部分。

我无法使用单个图像作为对话框，因为内容可能是任何高度，我想避免使用多个图像拼合在一起，因为此解决方案更清洁。

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

来源

2012-06-18 Turnip

也许只是为了箭头的小图像？ – VDP

你所追求的是不可能的。然而，我知道几个解决方法：

首先和最简单的，从箭头上松开阴影。它仍然看起来不错。

其次，使用图像和箭头在阴影中烘烤。可能不理想，但它有效。

第三种选择，只需制作一个20乘20的正方形，然后使用所有这些样式，然后使用变换对其进行旋转。你会得到一颗钻石，所以下一步就是使用一个面具来隐藏你不需要的边缘。我之前做过这个，但是在这个过程中它肯定会有些模糊，所以我最终选择了第一个选项。如果你不能使用蒙版，你可以将箭头包装在div/span或其他东西中，并将其设置为隐藏。额外的代码，但结果相同。

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

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

希望帮助:)

来源

2012-06-18 11:01:34 will

最后，我稍微重新设计了一下这个设计，这样箭头就在黑暗的地方，离开了箱子的阴影。不理想，但看起来不错。 – Turnip

为时已晚，但我用你的代码，使其为我的网站工作。所以，我在这里分享它。

它只需要一个额外的像HTML和CSS的一些变化：

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

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

来源

2014-03-08 02:29:42

透明边界和箱阴影愁楚

回答

相关问题