CSS3导航箭头

Question

CSS3导航箭头

4

我有一个导航栏，看起来像这样:

enter image description here

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

- Antonio Papa

你尝试过搜索 "css arrow" 吗？有很多例子。 - Itay Gal

我看到了这个链接：http://css-tricks.com/snippets/css/css-triangle/，但不知道如何实现它。 - Antonio Papa

请添加您的HTML代码 - Itay Gal

创建您的代码示例以便于在您的代码中实现该箭头。 - The Mechanic

1

这个链接可能会对你有帮助：http://cssarrowplease.com/。 - DiederikEEn

这是 Fiddle：http://jsfiddle.net/SwN66/ - Antonio Papa

3个回答

2

这里有一个例子可以使用。你可以将.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>

- Arazu

不是的，这不是我正在寻找的。 - Antonio Papa

这可能与您发布的图像完全相同，只需对颜色和填充进行一些小改动，您就可以得到相同的结果。那么您在寻找什么呢？ - Arazu

我接受的答案是我正在寻找的。我升级了您的答案，它可能有用，但Martin Turjak的答案更加优雅。谢谢回答。 - Antonio Papa

2

当然可以使用CSS3来制作三角形，以下链接提供了一个很好的例子：http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/。此外，这个链接也提供了一个纯CSS对话框的示例。请注意保留HTML标签。

- The Mechanic

谢谢，这些链接会很有用 :) - Antonio Papa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Turjak · Accepted Answer

使用: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 的填充移动，并在此示例中添加了 a 的 display:block。

这是jsfiddle。