html - ボックスシャドウ付きの CSS 吹き出し

Question

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

これは可能ですか？それとも、これに border-image を使用した方がよいでしょうか?

(上: シャドウ前、中: CSS ボックスシャドウ、下: 望ましい結果)

Box-Shadow が追加される前の要素

box-shadow を追加した要素

望ましい結果

.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;
    }

score 119 · Accepted Answer

三角形のハックを使用する代わりに、を使用して div を回転させtransform、実数を取得でき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;
}

出力：

ここに画像の説明を入力

score 8 · Accepted Answer

これは完全な (S)CSS での完全な動作例で、鼻のサイズの影の幅とオプションの境界線の変数があります。

秘訣は、オフセットと変換を適切に行ってピクセルパーフェクトを達成し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 );
}

score 5 · Accepted Answer

別の解決策はfilter: drop-shadow(0 1px 2px rgba(0,0,0,.5));、オブジェクトの形状の周りに影を配置するだけです。

score 4 · Accepted Answer

少しトリッキーですが、私にはいいようです。ここにフィドルがあります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;
}

の代わりに、単純に for biblebox-shadowを使用できます。border

score -4 · Accepted Answer

使用しないでくださいbox-shadow。

 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;

html - ボックス シャドウ付きの CSS 吹き出し

5 に答える 5

Related

Reference

html - ボックスシャドウ付きの CSS 吹き出し