3

I am trying to use CSS 3 to create breadcrumb that is in the shape of arrows. This all works quite well but I need to try to add a gradient to the arrows.

I have got this far

But I am unable to make the tips have a gradient.

I have tried using the css from this answer here

but this gives me this result (it doesn't seem to work for me and the tips just turn into boxes)

Does anyone have any idea how to achieve my desired result?

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))
    );
}
4

3 回答 3

0

play around with the degree of the gradient to match the your gradient but I believe this is what you are looking for. hopefully it will get you on the right path

.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;
于 2013-08-21T16:43:50.133 回答
0

Please check the below

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

I have updated the z-index value in .arrow:after

于 2013-08-21T17:04:15.110 回答
0

As pointed out by Ilya Streltsyn, I needed to change the z-index and add the -webkit-transform to make it work

于 2013-09-04T11:19:21.617 回答