css - CSS三角形のグラデーションカラー

Question

CSS矢印のあるナビゲーションメニューがあります。ナビゲーションメニュー項目にグラデーション効果を得ることができましたが、矢印にはそれを得ることができませんでした.

<ul id="content_navigation">
        <li><a href="">Test Link 1</a></li>
        <li><a href="">Test Link 2</a></li>
        <li><a href="">Test Link 3</a></li>
        <li><a href="">Test Link 4</a></li>
        <li><a href="" class="current">Test Link 5</a></li>
    </ul>    

CSS は非常に長いため、以下に作業フィドルを追加しました。

ここに作業フィドルがあります

完璧な答えを持つ同様の質問が見つかりましたが、コードに同じものを実装できません。