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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    svg.flecha {
      overflow:visible;
      fill:yellow;
      stroke:red;
      stroke-width:2px;
      width:100px;
      height:40px;
    }

<!-- language: lang-html -->

    <svg viewBox="0 0 100 40" class="flecha">
      <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
    </svg>

<!-- end snippet -->

Te dejo un ejemplo interactivo para que veas que se puede manipular fácilmente usando CSS y un poquito de JavaScript:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->