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