4

次のようなナビゲーションがあります。

ここに画像の説明を入力

選択したページには、png 画像で作成したオレンジ色の矢印があります。私の質問は、css/css3 でその矢印を作成できますか? コードは次のとおりです。

nav ul li {
    display: block;
    padding: 25px 40px 25px;
}

nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

nav ul li.selected a{
    color: #ef5a29;
}

nav ul li.selected{
    background-image: url('../img/arrow.png');
    background-position: right;
    background-repeat: no-repeat;
}
4

3 に答える 3

2

擬似オブジェクトのいくつかの魔法を使用する:afterと、html マークアップを変更する必要さえありません =)

あなたはそのようなことを試すことができます：

nav ul li.selected:after{
    content:'';
    float:right;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid #ef5a29;
}

または、以下のjsfiddleで行ったように：

nav ul li.selected a:after{
    content:'';
    position:absolute;
    top:20px;
    right:0;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid #ef5a29;
}

この例では、パディングを移動してli追加display:blockしたことにも注意してください。a

ここにjsfiddleがあります

于 2013-05-14T08:52:53.807 に答える