如何在 CSS 中用 div 制作尖箭头

如何在 CSS 中制作尖箭头？不只是一个三角形，而是一个有茎的三角形，就像用弓射出的传统箭一样？

我试图通过创建一个 div 容器来做到这一点，其中包含两个容器（左容器和右容器）。右侧将包含三角形，左侧将包含三个 div，其中心将被着色以创建主干。

这是我的代码：

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>

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

有没有更简单的方法来实现这一目标？

这是一个纯箭头CSS。支持者all浏览器。我花了不到一分钟就做好了..

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

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