Html CSS3导航箭头

我有一个如下所示的导航：

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

---

使用<代码>：在<代码>伪对象之后，您甚至不需要更改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;
}

或者像我在下面的JSFIDLE中所做的那样：

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

---

这里是

是的，绝对可以通过css3制作这个三角形检查下面的链接这里是一个很好的例子

---

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

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

a、 选中。向左箭头{
宽度：0；
身高：0；
/*顶部和底部边框定义箭头的高度*/
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：25px实心#EF5A29；/*箭头的宽度25px和橙色*/
左边距：10px；/*这使得箭头与文本之间有一定的距离*/
显示：块；
浮动：对；
}
保险商实验室{
右边框：5px实心#EF5A29；/*橙色边框*/
显示：块；
宽度：150px；/*因此它不会自动获得100%*/
}
李{
列表样式：无；/*删除列表条*/
}
李阿{
宽度：150px；
显示：块；
右边填充：10px；
}

家
投资组合
关于

您是否尝试搜索“css箭头”？有很多例子我看到了这一点：但不知道如何实现它请添加你的HTML代码创建一堆代码以便于在代码中实现箭头这可能很容易通过谷歌搜索：你可能会找到有用的链接不，这不是我要找的。这可能与你发布的图像完全相同。只需对颜色和填充进行一些小的更改，您就会得到相同的结果。那么你在寻找什么？我接受的答案正是我想要的。我升级了你的答案，我可能会很有用，但Martin Turjak的答案更优雅。Thanx的回答非常感谢它的有效性：）。有一个问题，你为什么使用内容：“”？很高兴能帮忙！=）对于您的问题，

content

是伪对象的必需属性

：before

和

：before

和

：before

，如果缺少，它们将不会显示。谢谢您，这些链接将非常有用：）