Html 使用CSS剪裁导航栏

我正绞尽脑汁想修好这个导航栏

这里剪，这里填

通过这些图片，您可以看到我使用transform创建了菱形（或者是政治上正确的平行线）菜单。我利用ul和li来做到这一点

我想结束的接触被剪辑，我尝试使用溢出，但似乎没有工作。是否可以灵活地剪裁菜单栏的最后一个菜单项？或者如果没有，请有人告诉我是否可以创建一个单独的填充程序，它将与联系人项目菜单一起工作

在说明中，当我将contact item菜单悬停时，填充程序也将进入悬停状态。而且，需要根据浏览器大小调整填充

这是我的HTML

<div class="outerwrap">    
     <div class="innerwrap">
         <div class="container">
             <div class="sixteen columns"> 
                 <div class="header">
                     <img class="scale-with-grid" id="logo" src="images/Logo-161x114.png" alt="Creative VistaIdea">
                     <div id="navbar">
                         <ul id="nav" >
                             <li class="rhombus"><a class="Home"     href="#"><span><p>Home</p></span></a></li>
                             <li class="rhombus"><a class="About"    href="#"><span><p>About</p></span></a>
                                   <ul>
                                         <li><a class="History"  href="#"><span><p>History</p></span></a></li>
                                         <li><a class="Board"    href="#"><span><p>Board</p></span></a></li>
                                         <li><a class="Vision"   href="#"><span><p>Vision &amp; Mission</p></span></a></li>
                                     </ul>
                             </li>
                             <li class="rhombus"><a class="Benchmark"    href="#"><span><p>Benchmark &amp; Market</p></span></a></li>
                             <li class="rhombus"><a class="Service"      href="#"><span><p>Service</p></span></a></li>
                             <li class="rhombus"><a class="Work"         href="#"><span><p>Work</p></span></a></li>
                             <li class="rhombus"><a class="Client"       href="contact.html"><span><p>Client</p></span></a></li>
                             <li class="rhombus"><a class="Contact"      href="index.html"><span><p>Contact</p></span></a></li>
                         </ul>
                     </div>
                 </div>
              </div>
           </div>
       </div>
</div>

---

若您不反对在最后一个项目中添加元素，也就是说菜单不是动态创建的，并且不需要跟踪最后一个元素是什么，那个么您可以尝试在最后一个LI中添加一个div，它可以作为后填充

<li class="rhombus"><div style='position:relative;z-index:10;'><a class="Contact" href="index.html"><span><p>Contact</p></span></a></div><div class='clipper'></div></li>

---

为了在不更改html的情况下处理Pow lan答案，我在CSS中添加了：

#nav > .rhombus:last-child:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: red;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

#nav > .rhombus:last-child:hover:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: green;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

大多数处于悬停状态的代码都是冗余的，只需更改颜色即可。 我必须承认，我不知道为什么正确的坐标必须是这个值，我想知道它来自于倾斜。我已经试过了

结果是：

http://jsfiddle.net/vals/MV6CN/

---

谢谢你，我试过你的解决方案，效果很好。更妙的是，它还解决了另一个悬停问题。我尝试创建另一个

来填充打开的区域，但它使我无法在选择填充物时创建相同的悬停状态。您的解决方案使我能够将

放入

标记soo。。一箭双雕，既能解决空洞问题，又能解决悬停问题。再次感谢：）在不更改html的情况下，类似的方法是将：after伪元素分配给ul@vals你能帮我们摆弄一下这个吗？我很想知道你在说什么。谢谢

#nav > .rhombus:last-child:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: red;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

#nav > .rhombus:last-child:hover:after {
    content: "";
    width: 29px;
    height: 31px;
    background-color: green;
    position:absolute;
    top: 0px;
    right: 146px;
    z-index: 1;
    -webkit-transform: skew(35deg);
    display: block;
}

http://jsfiddle.net/vals/MV6CN/