Cień w oknie CSS wokół niestandardowego kształtu?

Question

Hy tam

muszę utworzyć div, która wygląda tak:

screenshot http://imageshack.us/a/img19/8223/bubblep.png

co ja wymyślił do tej pory to: http://jsfiddle.net/suamikim/ft33k/

.bubble { 
    position: relative; 
    width: 80px; 
    height: 160px; 
    border: 1px solid #33A7F4; 
    border-radius: 9px; 
    margin: 100px; 
    -webkit-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -moz-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -ms-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -o-box-shadow: 0px 0px 20px 2px #33A7F4; 
    box-shadow: 0px 0px 20px 2px #33A7F4; 

} 

.bubble:after, .bubble:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 17px solid transparent; 
    right: 100%; 
} 

.bubble-left:before { 
    border-top-color: #33A7F4; 
    border-right-color: #33A7F4; 
    top: 60px; 
} 

.bubble-left:after { 
    border-width: 16px; 
    border-top-color: black; 
    border-right-color: black; 
    top: 61px; 
} 

Jak widać "jedynym" problemem jest cienie-pudełko wokół ogona bańki (trójkątna strzałka).

Próbowałem również nie używać po pseudo-klasach przed-&, ale używam drugiego elementu div, który tylko trzyma trójkąt (z transformacją, obrotem, ...), ale oczywiście nie doprowadziło mnie to do żadnych sukcesów.

Obraz statyczny nie jest opcją, ponieważ rozmiar samego prostokąta i pozycja ogona są dynamiczne i mogą się zmieniać podczas "czasu pracy".

Wymyśliłem również rozwiązanie, w którym utworzyłem granicę z cieniem z dynamicznie aktualizowanym svg. Jeśli nie można znaleźć innej opcji, pozostanę przy tym rozwiązaniu, ale czuję się dość silna jak "hack". Nie zamieszczam tutaj tego rozwiązania, ponieważ zawiera ono 2 javascript-framworks (extjs & raphael), a to pytanie powinno dotyczyć html & css. Mimo to mogę go podać, jeśli ktoś go interesuje ...

Ostatnia rzecz: kompatybilność z przeglądarkami to nie jest wielka sprawa. Jeśli to działa w najnowszych wersjach tych dużych (Firefox, Chrome, Opera, czyli 10, ...) wszystko jest w porządku;)

Dzięki,

mik

Answer 1

Zastosowanie drop-shadow:

może this article (box-shadow-vs-filter-drop-shadow) pomoże Ci

Answer 2

To chyba nie w twojej najlepiej to zrobić, pozostawiłbym go takim, jaki jest.

http://css-tricks.com/triangle-with-shadow/

Można pominąć w dół do „Podwójne-Box Method” i to pokazuje bardzo ręczny sposób to zrobić przy użyciu :before i :after (który wykorzystał podejmowania bańki) z pomocą transform . Jeśli naprawdę chciałeś to zrobić, możesz unieść strzałę w lewo i zastosować cienie poprzez pseudoelementy.