矢印とドロップシャドウの丸いコーナースピーチボックス。イメージベース

Question

私はボックスをスタイルする必要があります、添付のスクリーンショットをご覧ください。

• 身長と体重が異なる可能性があります。 150 x 200ピクセルでも、600 x 150ピクセルでも構いません。
• Internet Explorer 8が必要です。このため、悲しいことに、CSS3 技術は使用できませんでした。 IE 7はサポートされません。
• 影は右下です。しかし、誰かが4面の影の解決策を知っていれば 私も興味があります。
• 私はいろいろなライブラリで良い経験をしていないので、JavaScriptベースのソリューションを使用しないことをお勧めします。
• さまざまなdivにコンテンツをラップするのではなく、きれいな構造です。 "code mockoup"を参照してください。
• 矢印の位置が異なる場合があります。それが上になる可能性があり、（例えば、出荷を拡大する）私はzara.com solutionを見つけたなど

<div class="dropdown"> 
<div class="leftTop"></div> 
<div class="rightTop"></div> 
<div class="leftBottom"></div> 
<div class="rightBottom"></div> 
<div class="arrow"></div> 
<div class="dropdownContent"> 

</div>           
</div> 

として良いスタート地点を残しました。彼らはsuch image

コンは、それが画像の一部であるとして、ラッパーの背景色はCSSで変更することができなかったということである使用します。しかしそれほど重要ではない。

Answer 1

CSS3 PIEを使用すると、角、影などのCSS3機能を使用できます。いくつかの機能はエミュレートするためにCPUを多用していますが、バージョン6以降はCSS3準拠のIEが多かれ少なかれ提供されます。

Answer 2

古いポストですが、次の純粋なCSS3ソリューションについて言及する価値があります。与えられた以下のLess CSS：

// Tooltip Variables 

@wcui_tt_radius: 6px; 
@wcui_tt_arrow_size: 6px; 
@wcui_tt_background: rgba(0,0,0,0.8); 
@wcui_tt_foreground: white; 
@wcui_tt_padding: 6px 10px; 
@wcui_tt_font: 13px "Helvetica Neue", Arial, Helvetica, sans-serif; 
@wcui_tt_z: 100; 
@wcui_tt_max_width: 200px; 


// Mixins 

.opacity(@opacity) { 
    opacity: @opacity/100; 
    filter: ~"alpha(opacity=@{opacity})"; 
} 

.transition(@transition) { 
    -webkit-transition: @transition; 
    -moz-transition: @transition; 
     -ms-transition: @transition; 
     -o-transition: @transition; 
      transition: @transition; 
} 

.border-radius(@radius) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
      border-radius: @radius; 
} 


#arrow { 
    .top(@arrowWidth: 5px, @color: black) { 
     top: 0; 
     left: 50%; 
     margin-left: -@arrowWidth; 

     border-left: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid @color; 
    } 
    .bottom(@arrowWidth: 5px, @color: black) { 
     bottom: 0; 
     left: 50%; 
     margin-left: -@arrowWidth; 

     border-left: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid transparent; 
     border-top: @arrowWidth solid @color; 
    } 
    .left(@arrowWidth: 5px, @color: black) { 
     top: 50%; 
     left: 0; 
     margin-top: -@arrowWidth; 

     border-top: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid @color; 
    } 
    .right(@arrowWidth: 5px, @color: black) { 
     top: 50%; 
     right: 0; 
     margin-top: -@arrowWidth; 

     border-top: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid transparent; 
     border-left: @arrowWidth solid @color; 
    } 
} 


// Tooltip Styles 
.tooltip { 
    font: @wcui_tt_font; 
    .opacity(0); 
    .transition(opacity 0.15 ease); 
    z-index: @wcui_tt_z; 
    position: absolute; 
    overflow: visible; 
    display: block; 
    visibility: visible; 

    .on { .opacity(100); } 

    .content { 
     position: relative; 
     overflow: hidden; 
     background-color: @wcui_tt_background; 
     color: @wcui_tt_foreground; 
     padding: @wcui_tt_padding; 
     .border-radius(@wcui_tt_radius); 
     max-width: @wcui_tt_max_width; 
    } 

    .arrow { 
     position: absolute; 
     width: 0; 
     height: 0; 
     margin: 0 auto; 
    } 

    &.top { 
     padding-top: @wcui_tt_arrow_size; 
     .arrow { #arrow > .top(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.bottom { 
     padding-bottom: @wcui_tt_arrow_size; 
     .arrow { #arrow > .bottom(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.left { 
     padding-left: @wcui_tt_arrow_size; 
     .arrow { #arrow > .left(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.right { 
     padding-right: @wcui_tt_arrow_size; 
     .arrow { #arrow > .right(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
}

これは長いようですが、実際にはそうではありません。ミックスインはLess CSSコード全体で再利用されます。 HTMLマークアップは簡単です：

<div class="tooltip left"> 
    <div class="arrow"></div> 
    <div class="content"> 
     <p>This is a sample large tooltip.</p> 
    </div> 
</div> 

残っているのは、それを配置し、何とかあなたはそれを表示したいときにjQueryのようなものを使ってクラス「に」を追加することです。結果は次のようになります。

Tooltip Sample http://f.cl.ly/items/2u2Z1H011p2R1h1D0B3N/tips.png