使用漸變重疊CSS 3箭頭

Question

我正在嘗試使用CSS 3創建呈箭頭形狀的麪包屑。這一切都很好，但我需要嘗試向箭頭添加漸變。

I have got this far

但我無法做出提示有一個梯度。

我一直在使用的CSS從這個答案here

嘗試，但這個給了我這個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

正如指出的伊利亞Streltsyn，我需要改變z-index，並添加-webkit-transform，使其工作

Answer 2

發揮作用的，以配合您的梯度 但我相信這是你在找什麼。希望這將讓你在正確的道路上

.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; 

Answer 3

請檢查下面的

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;z-index:-1} 
.current {display:inline-block; border-radius:50%; background-color:#B75E00; width:1.25em; height:1.25em;} 

.arrow { 
    float: left; 
    position: relative; 
    border: 1px solid #ccc; 
    border-right: none; 
    width: 240px; height: 80px; 
    background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); 
    cursor: pointer; 
} 
.arrow:after { 
    position: absolute; 
    top: 50%; right: 0; 
    margin: -24px -20px; 
    border-top: solid 1px #ccc; 
    border-right: solid 1px #ccc; 
    width: 40px /* 80px/2 */; height: 47px/* 80px/sqrt(3) */; 
    transform: rotate(30deg) skewY(30deg); /* create a rhombus */ 
    /* 49.1deg = atan(1.15) = atan(47px/40px) */ 
    background: linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white); 
    content: ''; 
    z-index: 9999; 
} 

我已經更新了Z-索引值在.arrow:after