意外的盒子陰影行爲

Question

我試圖在CSS中繪製一個小三角形（作爲矩形聊天泡泡的尾巴）。我設法做到了這一點，但後來我想對盒子和尾部應用盒子陰影。所以，我有尾巴下面的CSS：

#bubble::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: -22px; 
    left: 10px; 
    border-width: 22px 0 0 20px; 
    border-style: solid; 
    border-color: #fff transparent; 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6); 
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6); 
} 

這使得本（對不起，背景是因爲變焦的有點模糊）：

注意如何箱陰影不會沿着氣泡尾部的對角線部分呈現。

我想達到理想的效果是：

這是在Photoshop的截圖，所以它可能看起來不是瀏覽器的portview的部分截圖有點不同（的陰影應該是更大的，我忘了在縮放路徑後更新圖層樣式）。

我該怎麼做到這一點？

謝謝！ P：我很樂於使用柵格圖像或SVG，儘管如果我不需要，我寧願使用柵格圖像或SVG。

Answer 1

我認爲你正在試圖做的是有關這個以前的帖子上SA：CSS Drop Shadow for CSS drawn arrow

Answer 2

恐怕這不適用於CSS。 box-shadow適用於元素的框中，圖像仍然是矩形:)

請參閱http://lineandpixel.com/blog/png-shadow以便從另一個受挫用戶進行書寫。

你必須咬牙切齒，使用光柵圖像或SVG。