3

CSS 3を使用して、矢印の形をしたブレッドクラムを作成しようとしています。これはすべてうまく機能しますが、矢印にグラデーションを追加する必要があります。

ここまできた

しかし、ヒントにグラデーションを付けることができません。

こちらの回答のcssを使用してみました

しかし、これによりこの結果が得られます（私にはうまくいかないようで、ヒントがボックスに変わるだけです）

希望の結果を達成する方法を知っている人はいますか?

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

以下をご確認ください

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-index 値を更新しました.arrow:after

于 2013-08-21T17:04:15.110 に答える
0

グラデーションに合わせてグラデーションの程度をいじってみますが、これがあなたが探しているものだと思います。うまくいけば、それはあなたを正しい道に導きます

.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 に答える