Make an arrow using CSS

Question

I am trying to make something like an horizontal label: But there is a condition, should be an unique div. Probably with canvas is possible, however i have

Answer 1

http://jonrohan.me/guide/css/creating-triangles-in-css/

might be of help to you, looks like what youre trying to do

Answer 2

You can accomplish this with some border hacks, positioning, and the :before psudo-element.

http://jsfiddle.net/VQcyD/

#msg {
    width:100px;
    height:40px;
    background:red;
    margin-left:40px;
    position:relative;

}
#msg:before {
    content:"";
    position:absolute;
    border-bottom: 20px solid transparent;
    border-right: 20px solid red;
    border-top: 20px solid transparent;
    height: 0px;
    width: 0px;
    margin-left:-20px;
}