Hy,

Muszę utworzyć div, który wygląda tak:

zrzut ekranu http://imageshack.us/a/img19/8223/bubblep.png

Do tej pory wymyśliłem 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 widzisz, „jedynym” problemem jest cień pudełka wokół ogona bańki (trójkątna strzałka).

Próbowałem też nie używać pseudo-klas przed- i po-pseudo-klasach, ale używam drugiego div, który przechowuje tylko trójkąt (z transformacją, rotacją ...), ale oczywiście nie doprowadziło mnie to do sukcesu.

Statyczny obraz nie jest opcją, ponieważ rozmiar samego prostokąta i położenie ogona są zarówno dynamiczne, jak i mogą się zmieniać podczas „czasu wykonywania”.

Wymyśliłem także rozwiązanie, w którym tworzę granicę i cień za pomocą dynamicznie sgg. Jeśli nie można znaleźć innej opcji, pozostanę przy tym rozwiązaniu, ale wydaje się to dość silne, jak „hack”. Nie publikuję tego rozwiązania tutaj, ponieważ obejmuje ono 2 javascript-framworks (extjs i raphael) i to pytanie powinno dotyczyć html i css. Niemniej jednak nadal mogę go dostarczyć, jeśli ktoś jest nim zainteresowany ...

Ostatnia rzecz: kompatybilność z przeglądarkami to nie taka wielka sprawa. Jeśli działa w najnowszych wersjach dużych (firefox, chrome, opera, tj. 10, ...) wszystko jest w porządku;)

Dzięki,

mik