javascript - How can I make a pointy arrow with a div in CSS

How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?

I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.

Here's my code:

HTML:

CSS:

.rectcontainer {
    height:30px;

    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;

    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

Is there a simpler way to achieve this?

Answer

Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..

jsFiddle

.arrow {
  width: 120px;
}

.line {
  margin-top: 14px;
  width: 90px;
  background: blue;
  height: 10px;
  float: left;

}

.point {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
  float: right;
}