Цвет градиента для css traingle

Question

У меня есть меню навигации, которое имеет css arrow. Я мог бы получить эффект градиента для пунктов меню навигации, но не смог получить его для стрелки.

<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 довольно длинный, поэтому добавлена ​​рабочая скрипка ниже.

Здесь работает fiddle

Найден similar question с идеальным ответом, но я не в состоянии осуществить то же самое в моем коде.

Answer 1

Ключевыми моментами для достижения этой цели являются поворот + наклон, а повернутый градиент:

#content_navigation a::after, 
#content_navigation a::before{ 
    -webkit-transform:rotate(45deg) skew(20deg,20deg); 
    -webkit-transform-origin:0 0; 
    background: -webkit-linear-gradient(135deg, #fefefe 0%,#e1e1e1 100%); 
    /* just for better understanding you should change the bg-color 
    to understand how this is done*/ 
    background:red; 
    border-top:1px solid red; 
    border-right:1px solid red; 
} 

Большим недостатком является то, что вам нужно объявить явную ширина + высота на этих элементах. Также псевдоэлемент может перекрывать контент. Чтобы этого избежать, вам нужно изменить z-index, чтобы подтолкнуть его к фону. Преимущество перед уловкой границы - вы даже можете использовать box-shadow.

Вот ссылка вашего modified Fiddle, работающая только в Chrome. Но вы должны иметь возможность работать это самостоятельно.