透明邊界和箱陰影愁楚

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

透明邊界和箱陰影愁楚

回答

相關問題