Rounded corner speech box with arrow and dropshadow. Image based

I need to style box, please see attached screenshot.

• Height and weight could differ. It could be 150 x 200 px but also 600 x 150 px.
• Internet Explorer 8 is must. Due to this sadly no CSS3 technique could be used. IE 7 will not be supported.
• Shadow is bottom and right. But if somebody know solution for four sided shadow I´ll be also interested in.
• Prefer not to use JavaScript based solution as I don´t have good experience with various libraries.
• Clean construction instead of wrapping content in various divs. See "code mockoup".
• Posi开发者_运维知识库tion of arrow could differ. It could be on top, left etc.

<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>

As good start point I found zara.com solution ( expand e.g. shipping ). They use such image

Con is that background color of wrapper couldn't be changed in CSS as it is part of image. But it's not so important.

You can use rounded corners, shadows and other CSS3 features if you use CSS3 PIE. Some features are a bit cpu intensive to emulate, but it gives you a more or less CSS3 compliant IE starting from version 6.

Old post, but worth mentioning the following pure CSS3 solution. Given the following 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); }
    }
}

It seems long, but it really isn't. The mixins get re-used throughout your Less CSS code. The HTML markup is straightforward:

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

All that remains is to position it and somehow add the "on" class using something like jQuery when you want it to appear. The result looks like:

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