Como te ponía en un comentario, sería casi más simple hacerlo con SVG, y tendría la ventaja de que sería fácil de escalar y podrías manipularlo igualmente. Aquí te dejo el código que es muy muy sencillo:
svg.flecha {
overflow:visible;
fill:yellow;
stroke:red;
stroke-width:2px;
width:100px;
height:40px;
}
<svg viewBox="0 0 100 40" class="flecha">
<path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
Te dejo un ejemplo interactivo para que veas que se puede manipular fácilmente usando CSS y un poquito de JavaScript:
var radios = document.querySelectorAll("input");
for (var x = 0; x < radios.length; x++) {
radios[x].addEventListener("click", function() {
document.querySelector("svg").setAttribute("class", "flecha " + this.value);
});
}
svg.flecha {
overflow:visible;
fill:yellow;
stroke:red;
stroke-width:2px;
width:100px;
height:40px;
}
svg.flecha.verde {
fill:green;
stroke:yellow;
}
svg.flecha.azul {
fill:blue;
stroke:green;
}
<div>
<input type="radio" name="estilo" value="" checked /> Estilo Original
<input type="radio" name="estilo" value="verde" /> Estilo Verde
<input type="radio" name="estilo" value="azul" /> Estilo Azul
</div>
<svg viewBox="0 0 100 40" class="flecha">
<path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>