html - CSS3 导航箭头

Question

我有一个看起来像这样的导航：

所选页面有一个橙色箭头，我用 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;
}

Answer 1

这是您可以使用的示例。您可以将 .selected 更改为 :hover（或复制），以获得悬停效果，甚至可以使用不同的颜色。

<style>
a.selected .arrow-left{
    width: 0; 
    height: 0; 
    /* Border top and bottom define the height of the arrow. */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:25px solid #EF5A29; /* The width of the arrow 25px and orange color */
    margin-left:10px; /* This so the arrow has some room from the text */ 
    display:block;
    float:right;
}
ul {
    border-right: 5px solid #EF5A29; /* The orange border */
    display:block;
    width:      150px; /* so it does not get 100% with automaticly */

}
li {
    list-style: none; /* Remove the list bullits */ 
}
li a{
    width:      150px;
    display:    block;
    padding-right:10px;
}
</style>
<ul>
<li><a class="selected">Home<span class="arrow-left"></span></a></li>
<li><a>Portfolio<span class="arrow-left"></span></a></li>
<li><a>About<span class="arrow-left"></span></a></li>
</ul>

Answer 2

是的，你绝对可以通过 css3 制作这个三角形，检查下面的链接这里是一个很好的例子 http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Answer 3

使用: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