¿Cómo puedo hacer una flecha puntiaguda en CSS? ¿No solo un triángulo sino uno con un vástago, como una flecha tradicional que se dispararía desde un arco?

Intento hacerlo creando un contenedor div, que contiene dos contenedores, izquierdo y derecho. La derecha contendrá el triángulo y la izquierda contendrá tres divs, cuyo centro se coloreará para crear el tallo.

Aquí está mi código:

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

¿Hay una manera más sencilla de lograr esto?