向伪元素添加渐变

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

箭头是透明的，“箭头”的其余部分与正文背景颜色相同。