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:

<div id="main">
  <div class='arrowblock'>
    <div class='arrowright'></div>
    <div class='rectcontainer'>
        <div class='rect'></div> <div class='rect' style='background-color:green'> </div>
        <div class='rect'> </div>
     </div>
  </div>
</div>

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?


solution

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

enter image description here

jsFiddle

HTML

<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

CSS

.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;
}