カスタムシェイプの周りのCSSボックスの影？そこ

Question

Hyは、私はこのようになりますdiv要素を作成する必要があり

：私は今のところ思い付いたもの

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

はこれです： 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; 
} 

あなたが見ることができるように、「唯一の」問題は、バブルの尾の周りのボックスシャドウ（三角形の矢印）です。

私はまた、before-& after-pseudo-classを使用しないようにしましたが、三角形（変換、回転など）を保持する2番目のdivを使用しましたが、成功もない。

スタティックピクチャはオプションではありません。矩形自体のサイズとテールの位置が両方ともダイナミックで「ランタイム」中に変更できるためです。

私はまた、境界を作成する解決策を思いついた&動的に魅力的なsvgと影。他のオプションが見つからない場合、私はこの解決策に固執するつもりですが、「ハック」のようにかなり強く感じます。私は2つのjavascript-framworks（extjs & raphael）を含んでおり、この質問はhtmlの& cssに関するべきであるので、私はこの解決策をここに掲載していません。 それでも誰かが興味があれば、私はまだそれを提供することができます...

最後に1つ：ブラウザとの互換性はそれほど重要ではありません。それは大きなもの（すなわちFirefoxの、クロム、オペラ、10、...）すべてが正常であるの最新バージョンで働いている場合は、MIK

Answer 1

使用ドロップシャドウ：

多分this article (box-shadow-vs-filter-drop-shadow)はあなた

Answer 2

）

おかげで、

をそれはあなたの中で、おそらくではありませんこれを行うには最高の関心事、私はそれをそのまま残すだろう。

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

transformの助けを借りて、あなたは「ダブルボックスメソッド」までスキップすることができ、それは（すでにバブルを作るまで使用された）:beforeと:afterを使用してこれを行うのは非常に手動の方法を示してい。本当にこれをやりたければ、矢印を左に浮かべて、疑似要素に影を適用することができます。