ボックスの影付きCSS音声バブル

Question

CSSを使用して左に三角形を描くDIVを作成する。親と擬似要素（画像参照）とコードの両方に均一なボックスシャドウを適用しようとしています。

これは可能ですか？または、私はこのためにボーダー画像を使用する方が良いですか？

（トップ：CSSボックスシャドウ、ボトム：シャドウ、中東の前に望ましい結果）

.bubble{ 
    height: 200px; 
    width: 275px; 

    opacity: 0; 

    margin-top: 41px; 

    float: right; 

    background-color: #F2F2F2; 

    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 6px #B2B2B2; 
} 

.bubble::after { 
     height: 0px; 
     width: 0px; 

     content: "\00a0"; 

     display: block; 

     margin-left: -10px; 
     margin-top: 28px; 

     border-width: 10px 10px 10px 0; 
     border-style: solid; 
     border-color: transparent #F2F2F2 transparent transparent; 

     -webkit-box-shadow: 0px 0px 6px #B2B2B2; 
    } 

Answer 1

三角ハックを使用する代わりに、transformを使用してdivを回転させ、実際にbox-shadowにすることができます。 divの片側（可視の三角形の側）にのみ影が必要なので、blurを小さくして、opacityを小さくする必要があります。

デモ：http://jsfiddle.net/ThinkingStiff/mek5Z/

HTML：

<div class="bubble"></div> 

はCSS：

.bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0px 0px 6px #B2B2B2; 
    height: 200px; 
    margin: 20px; 
    width: 275px; 
} 

.bubble::after { 
    background-color: #F2F2F2; 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
    content: "\00a0"; 
    display: block; 
    height: 20px; 
    left: -10px; 
    position: relative; 
    top: 20px; 
    transform:    rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform:  rotate(45deg); 
     -o-transform:  rotate(45deg); 
     -webkit-transform: rotate(45deg); 
    width: 20px; 
} 

出力：

Answer 2

私はそれは少し知っていますトリッキーですが、私にはいいようです。ここで はフィドルhttp://jsfiddle.net/dzfj6/

HTML

<div class="bubble"> 
    <div class="triangle"></div> 
    <div class="border"></div> 
    <div class="content">some content</div> 
</div> 

CSS

.bubble 
{ 
    height: 200px; 
    width: 275px; 
    float:right; 
    margin-top: 41px; 
    margin-left:11px; 
    background-color: #f2f2f2; 
    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 5px #b2b2b2; 
    position:relative; 
    z-index:1; 
} 

.triangle 
{ 
    position:absolute; 
    top:12px; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 10px solid #f2f2f2; 
    margin-left:-9px; 
    z-index:3; 
} 
.border 
{   
    position:absolute; 
    top:12px; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 10px solid #e0e0e0; 
    margin-left:-10px; 
    z-index:2; 
} 

.content{ 
    padding:10px; 
} 

代わりのbox-shadowである、あなたは単にブーブレのためborderを使用することができます。

Answer 3

0を使用しないでください。ここで

height: 200px; 
    width: 275px; 
    float:right; 
    margin-top: 41px; 
    margin-left:11px; 
    background-color: #f2f2f2; 
    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 5px #b2b2b2; 
    position:relative; 
    z-index:1; 

Answer 4

は 鼻の大きシャドウ幅の変数とオプションの国境で、フル（S）CSSでcomplete working exampleです。

トリックは、オフセットを取得して右に変換してピクセルの完成度を達成し、必要に応じてoverflow:hiddenを使用してバブルの鼻をカットします（特に枠線が必要な場合）。

上記の答えの例は、シャドウが切り取られてメインの吹き出し領域に配置されるため、私たちのためには機能しません。

IE7/8で正常に劣化します。

HTML：

<div class="chat"> 
    <div class="bubble"> 
     <span class='tail'>&nbsp;</span> 
     <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
    </div> 
</div> 

SCSS：

$shadow_radius = 6px; 
$nose_size = 12px; 
$shadow = 0 1px $shadow_radius #B2B2B2; 
$border = 1px solid #bbb 

.chat { 
    font-family:  sans-serif; 
    font-size:  small; 
} 

.bubble { 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    border:   $border; 
    box-shadow:  $shadow; 
    display:   inline-block; 
    padding:   10px 18px; 
    margin-left:  ($shadow_radius + $nose_size); 
    margin-right: ($shadow_radius + $nose_size); 
    position:   relative; 
    vertical-align: top; 
} 

.tail { 
    position: absolute; 
    top:  $nose_size; 
    left: -($shadow_radius + $nose_size); 
    height: ($shadow_radius + $nose_size); 
    width: ($shadow_radius + $nose_size); 
    overflow: hidden; 
} 
.tail:before { 
    border:   $border; 
    background-color: #F2F2F2; 
    box-shadow:  $shadow; 
    content:   "\00a0"; 

    display:   block; 
    position:   absolute; 
    top:    0px; 
    left:    $nose_size; 
    height:   $nose_size; 
    width:    $nose_size; 
    -webkit-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
} 

Answer 5

別の解決策は、それが唯一のオブジェクトの形状の周りに影を配置filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));使用することです。