Question

I’ve got this image:

I want to code this image (just the bar, not the background – background can change) using html and css3. It has to be scalable in height and width. What’s the best technique to do that? Thanks.

Answer 1

OK you can try this (tested in Firefox 11 only)…

HTML

<div class="bubble">
    <div class="content">
        Some content can go inside this bubble...
    </div>
    <div class="arrow"><div class="arrow-shadow"></div></div>
</div>

CSS

    .bubble
{
    background:#D0D0D0;
    background-image: -ms-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -moz-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -o-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BBB), color-stop(1, #EEE));
    background-image: -webkit-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: linear-gradient(top, #BBB 0%, #EEE 100%);
    border-radius:10px;
    border-top:2px solid #EEE;
    border-bottom:2px solid #AAA;
    position:relative;
    width:380px;
    height:100px;
}
.bubble .content
{
    padding:10px;
}

/* Arrow */
.bubble .arrow {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
}
.bubble .arrow:after,
.arrow .arrow-shadow
{
    border:10px solid Transparent;
    border-color:rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
    content:' ';     
    height:0;
    position:absolute;
    width:0;
}
.bubble .arrow:after
{
    border-left-color:#D3D3D3;
}
.arrow .arrow-shadow
{
    height:3px;
    border-left-color:#AAA;
}

It’s a bit of a hack in my opinion, but it seems to get fairly close to what you want. The only things that may be an issue are:

1. Backwards compatibility. Older versions of IE might choke so it’d be worth testing it and hacking IE compatibility as required.
2. If the box becomes too big, the arrow might look a different colour to the box. I can’t figure out a way around this, so you might have better results putting the arrow in a static location.

You can find a JSFiddle here: http://jsfiddle.net/eWj6q/13/