css - 用渐变重叠 CSS 3 箭头

Question

我正在尝试使用 CSS 3 创建箭头形状的面包屑。这一切都很好，但我需要尝试为箭头添加渐变。

I have got this far

但我无法使提示具有渐变。

我尝试使用这个答案 here 中的 css

但这给了我这个result (it doesn't seem to work for me and the tips just turn into boxes)

有谁知道如何实现我想要的结果吗？

HTML

<nav id="checkout-nav">
    <ul>
        <li class="arrow highlight"><span class="cell"><span class="current">1</span> Delivery</span></li>
        <li class="arrow"><span class="cell">Billing</span></li>
        <li class="arrow"><span class="cell">Review</span></li>
        <li class="arrow"><span class="cell">Payment</span></li>
        <li class="arrow"><span class="cell">Confirmation</span></li>
    </ul>
</nav>

CSS

#checkout-nav {background-color:#424E5A; width:100%; overflow:auto;}
#checkout-nav > ul {list-style:none; padding:0; margin:0;}

.cell {display:table-cell; height:50px; width:130px; text-align:center; vertical-align:middle;}
.current {display:inline-block; border-radius:50%; background-color:#B75E00; width:1.25em; height:1.25em;}

.arrow:first-child {margin-left:0px;}
.arrow {
    color:#A5ACB4;
    float: left;
    width: 128px;
    height: 50px;
    border: 1px solid #435059;
    position: relative;
    margin-left:-1px;
    background-color:#515E67;background-image: linear-gradient(bottom, rgb(146,149,154) 10%, rgb(69,82,91) 70%);
    background-image: -o-linear-gradient(bottom, rgb(146,149,154) 10%, rgb(69,82,91) 70%);
    background-image: -moz-linear-gradient(bottom, rgb(146,149,154) 10%, rgb(69,82,91) 70%);
    background-image: -webkit-linear-gradient(bottom, rgb(146,149,154) 10%, rgb(69,82,91) 70%);
    background-image: -ms-linear-gradient(bottom, rgb(146,149,154) 10%, rgb(69,82,91) 70%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.10, rgb(146,149,154)),
        color-stop(0.7, rgb(69,82,91))
    );
}

.arrow:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 128px;
    width: 0;
    height: 0;
    border: 25px solid transparent;
    border-left: 12px solid #515E67;
    z-index:2;   
}
.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    border: 25px solid transparent;
    border-left: 12px solid #435059;
    z-index:1;   
}

.highlight {
    color:#ffffff;
    background-color: #515E67;
    background-image: linear-gradient(bottom, rgb(232,140,1) 10%, rgb(183,95,0) 70%);
    background-image: -o-linear-gradient(bottom, rgb(232,140,1) 10%, rgb(183,95,0) 70%);
    background-image: -moz-linear-gradient(bottom, rgb(232,140,1) 10%, rgb(183,95,0) 70%);
    background-image: -webkit-linear-gradient(bottom, rgb(232,140,1) 10%, rgb(183,95,0) 70%);
    background-image: -ms-linear-gradient(bottom, rgb(232,140,1) 10%, rgb(183,95,0) 70%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.10, rgb(232,140,1)),
        color-stop(0.7, rgb(183,95,0))
    );
}

Answer 1

玩弄渐变的程度来匹配你的渐变但我相信这就是你要找的。希望它能让你走上正确的道路

.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid #435059;
-webkit-transform: rotate(135deg) skewX(0deg) skewY(0deg);
-webkit-border-image: -webkit-gradient(
linear,
134 10,/*<--play with these number*/
134 50,/*<--play with these number*/
color-stop(0.10, rgb(146,149,154)),
color-stop(0.7, rgb(69,82,91))) 30 21 21 30 repeat repeat;
z-index:1;