Question

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

但我无法让提示有渐变。

我尝试过使用此答案中的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

使用渐变度来匹配渐变但我相信这就是你要找的东西。希望它会让你走上正确的道路

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

请查看以下内容

<强> 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;
}

我更新了.arrow:after

中的z-index值

Answer 3

正如Ilya Streltsyn所指出的，我需要更改z-index并添加-webkit-transform以使其正常工作

用渐变重叠CSS 3箭头

3 个答案: