插入透明三角形的菜单

Question

我试图用插入为每个类别设置一个透明三角形。的HTML是这样的：

<li class="level0 nav-1 level-top first"> 
<a class="level-top" href="http://shop.de/kinderzimmer"> 
<span> 
<span class="navborder navborder-left"></span> 
Kinderzimmer 
<span class="navborder navborder-right"></span> 
</span> 
</a> 
</li> 
... 

...但我可以添加/如果需要删除跨度/班等。

我第一次尝试这样的CSS：

#nav li.level0 a.level-top span { 
    position: relative; 
    width: 100%; 
    } 
#nav li.level0 a.level-top span:after { 
    content: ""; 
    left: 50%; /* center triangle */ 
    margin-left: -20px; /* center triangle */ 
    width: 0; 
    height: 0; 
    border-left: 20px solid red; 
    border-right: 20px solid red; 
    border-bottom: 20px solid transparent; 
    position: absolute; 
    top: 20px; 
    } 
#nav li.level0 a.level-top span span.navborder-left:after { 
    border-bottom: 20px solid green; 
    } 
#nav li.level0 a.level-top span span.navborder-right:after { 
    border-bottom: 20px solid blue; 
    } 

（颜色只是用于调试，应完成后匹配导航背景）

并不如预期的结果：http://jsfiddle.net/9brsR/6/

span.navborder-left和span.navborder-right的边界与居中的三角形元素有间隙。

任何人都有一个线索如何修复css有这样的事情：http://puu.sh/7jMEe.png？

Answer 1

这一个有点复杂，但有一些伪元素可以管理它。

Codepen Demo

CSS

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

ul, li { 
    padding: 0; 
    list-style: none; 
} 

ul { 
    text-align: center; 
    margin-top:15px; 
} 

li { 
    display: inline-block; 
    background-color: red; 
    font-size:0; 
    position: relative; 
} 

a { 
    display: block; 
    text-decoration: none; 
    font-size:1rem; 
    color:white; 
    padding: 1rem 2rem; 
    position: relative; 
} 

li:before, 
li:after { 
    position: absolute; 
    content:""; 
    top:100%; 
    width:calc(50% - 12px); /* allows to width of triangle*/ 
    height:12px; 
    background-color: red; 
} 

li:before{ 
    left:0; 
} 

li:after { 
    right:0; 
} 

a:before { 
    position: absolute; 
    content:""; 
    z-index:-1; /* hide behind link */ 
    border:12px solid red; 
    top:100%; 
    left:50%; 
    transform:translate(-50%, -50%); /* center the pseudo element and only show bottom half*/ 
} 

a.current:before { 
    border-bottom-color:transparent; /* our triangle */ 
} 

浏览器支持有限的，由于calc（IE9 +）和伪元素。

Answer 2

通过赋予此属性可以实现鼠标移过来的三角效果。这里是工作演示。 http://jsbin.com/tevoliva/2/

----------- CSS代码---------------

ul{list-style-type:none; margin:0; padding:0; background-color:#ef8913; } 
ul li {display:inline-block; padding:15px; position:relative;} 
ul li a{color:#ffffff; text-decoration:none;} 
li.active:after, 
li:hover::after { 
    content: ' '; 
    display: block; 
    position: absolute; 
    left: 50%; 
    bottom: 0px; 
    margin-left:-10px; 
    z-index: 99; 
    border-left: 12px solid transparent; 
border-right: 12px solid transparent; 
border-bottom: 12px solid white; 
} 

----- HTML代码--- ----

<ul> 
<li><a href="#">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Item 3</a></li> 
<li><a href="#">Item 4</a></li> 
<li class="triangle"><a href="#">Item 5</a></li> 
<li><a href="#">Item 6</a></li> 
</ul>