向伪元素添加渐变

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

的箭头是透明的，而 “箭头” 的其余部分是相同的身体背景颜色。