Добавить градиент в псевдоэлемент

Question

Как я могу применить желтый градиент к белой стрелке?

здесь скрипка ссылка: http://jsfiddle.net/VNnKR/

$('.white').hover(function() { 
$(this).addClass('gradient'); 
}) 

Answer 1

Я нашел решение, обратите внимание, что он работает только с твердым фоном.

HTML:

<div class="arrow"> 
    START HERE! 
</div> 

CSS:

body { 
    background: #6cc5c3; 
} 
.arrow { 
    margin-top: 150px; 
    position: relative; 
    font-weight: bold; 
    margin-bottom: 5px; 
    height: 20px; 
    padding: 10px 30px 10px 10px; 
    width: 140px; 
    color: #6cc5c3; 
    background: #fff; 
    text-align: center; 
} 
.arrow:after { 
    content:''; 
    height: 0; 
    width: 0; 
    display: block; 
    border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent; 
    border-width: 20px; 
    border-style: solid; 
    position: absolute; 
    top: 0; 
    right: -20px; 
} 

.gradient { 
    background: #ffe632; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e)); 
    background: -moz-linear-gradient(top, #fffe8d, #f6d23e); 
} 

DEMO

Стрелка прозрачен, а остальная часть "стрелки" такая же, как фоновый цвет кузова.