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 @H_419_2@ 我的导航看起来像这样：

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

解决方法 使用一些魔术：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 to a.

这是jsfiddle

@H_419_2@ 总结

以上是内存溢出为你收集整理的HTML – CSS3导航箭头全部内容，希望文章能够帮你解决HTML – CSS3导航箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。