What's the best technique to code this image - html

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:
Backwards compatibility. Older versions of IE might choke so it'd be worth testing it and hacking IE compatibility as required.
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/

Answer 2

I may not recommend it the best technique but somehow it will work better:
Using linear gradients: A linear gradient is one that gradually transitions between colours over the distance between two points in a straight line. At its simplest, a linear gradient will change proportionally between two colours along the full length of the line.
div {
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}

Answer 3

This is closest I could get using div's.
Probably could get the arrow better by using canvas, but it would require javascript.
Javascript would also sovle the background color problem for the arrowish-like box. :)
Demo: http://jsfiddle.net/Xvm2C/
​
Screenshot: http://i.stack.imgur.com/iwlMj.png
HTML part:
<div class="nice">
<div class="arrow-container">
</div>
Hello world!
</div>
CSS part:
body {padding:50px; background-color: #ccc;}
.nice {
background-color: white;
position: relative;
min-height:65px;
padding:10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 100%); /* firefox */
box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 0 #FFFFFF, 0 0 1px #666666, -1px -1px 0 rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-webkit-box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
text-shadow: 0 1px 2px #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#ffffff));
font-size:20px
}
.arrow-container {
background-color: white;
height: 26px;
position: absolute;
right: 0;
top: 50%;
margin-top:-13px;
margin-right:-19px;
width: 20px;
background: -moz-linear-gradient(top, #dcdcdc 0%, #ededed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#ededed));
box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 0 #FFFFFF, 1px 0 1px #666666, 0px -1px 0 rgba(0, 0, 0, 0.5) inset, -1px 1px 1px rgba(255, 255, 255, 0.8) inset;
-webkit-box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8);
-webkit-border-top-right-radius: 7px;
-moz-border-top-right-radius: 7px;
border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 25px;
-moz-border-bottom-right-radius: 25px;
border-bottom-right-radius: 25px;
}
​