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

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

Answer 2

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

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

Answer 3

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

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