html - 使用 CSS 裁剪导航栏

Question

我已经无计可施了，试图修复这个导航栏

在这里剪辑http://i.stack.imgur.com/eDFQK.png在这里填写http://i.stack.imgur.com/0aHv2.png

通过这些图片，您可以看到我使用变换来创建菱形(或政治正确，平行四边形)菜单。我使用 ul 和 li 来做到这一点。

我想剪掉接触的末端，我尝试使用溢出但它似乎不起作用。是否可以灵活地剪辑菜单栏的最后一个菜单项？或者，如果没有，有人可以告诉我创建一个单独的填充程序是否可行，该填充程序将与联系人元素菜单一起使用吗？

在解释中，当我悬停联系人元素菜单时，填充器也会进入悬停状态。填充器需要自适应浏览器大小。

这是我的 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>

这是我的 CSS:

#nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;}

     #nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background: #1a1a1a; /* Old browsers */
                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                        background: -moz-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); /* FF3.6+ */
                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
                                        background: -webkit-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
                                        background: -o-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Opera 11.10+ */
                                        background: -ms-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* IE10+ */
                                        background: linear-gradient(to bottom, #1a1a1a 0%,#4d4d4d 100%); /* W3C */
                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-8 */}

     #nav a:hover                        {background: #2e3191; /* Old browsers */
                                         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzE5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjc1YmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                         background: -moz-linear-gradient(top, #2e3191 0%, #1b75bb 100%); /* FF3.6+ */
                                         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e3191), color-stop(100%,#1b75bb)); /* Chrome,Safari4+ */
                                         background: -webkit-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Chrome10+,Safari5.1+ */
                                         background: -o-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Opera 11.10+ */
                                         background: -ms-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* IE10+ */
                                         background: linear-gradient(to bottom, #2e3191 0%,#1b75bb 100%); /* W3C */
                                         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3191', endColorstr='#1b75bb',GradientType=0 ); /* IE6-8 */}

     #nav li ul {position:relative; display:none;}

     #nav li ul li a:link, #nav li ul li a:active, #nav li ul li a:visited    {height:31px;
                                                        background: #859dc4; /* Old browsers */
                                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1OWRjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ODkzYmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                                        background: -moz-linear-gradient(top, #859dc4 0%, #8893be 100%); /* FF3.6+ */
                                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#859dc4), color-stop(100%,#8893be)); /* Chrome,Safari4+ */
                                                        background: -webkit-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Chrome10+,Safari5.1+ */
                                                        background: -o-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Opera 11.10+ */
                                                        background: -ms-linear-gradient(top, #859dc4 0%,#8893be 100%); /* IE10+ */
                                                        background: linear-gradient(to bottom, #859dc4 0%,#8893be 100%); /* W3C */
                                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#859dc4', endColorstr='#8893be',GradientType=0 ); /* IE6-8 */ ;}

     #nav li ul li a:hover                                            {background: #b3b1b1; /* Old browsers */
                                                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                                                        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjFiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4MTgyODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                                                        background: -moz-linear-gradient(top, #b3b1b1 0%, #818282 100%); /* FF3.6+ */
                                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3b1b1), color-stop(100%,#818282)); /* Chrome,Safari4+ */
                                                        background: -webkit-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Chrome10+,Safari5.1+ */
                                                        background: -o-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Opera 11.10+ */
                                                        background: -ms-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* IE10+ */
                                                        background: linear-gradient(to bottom, #b3b1b1 0%,#818282 100%); /* W3C */
                                                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b1b1', endColorstr='#818282',GradientType=0 ); /* IE6-8 */}

.History{width:13%;float:left;}
.Board{width:13%;float:left;}
.Vision{width:13%;float:left;}

     li.rhombus
     {
    position: relative;
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    width:100%;
     }

     a.Home         {width:10.1553784860558%;float:left;}
     a.About        {width:8.9601593625498%;float:left;}
    a.Benchmark {width:20.1155378486056%;float:left;}
    a.Service   {width:9.5577689243028%;float:left;}
    a.Work      {width:10.5498007968127%;float:left;}
     a.Client   {width:10.5498007968127%;float:left;}
     a.Contact  {width:11.9482071713147%;float:left;}

     li.rhombus span 
     {
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    display:block;
     }

     #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
     #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }                                        

Answer 1

如果你不反对在最后一项添加一个元素，也就是说菜单不是动态创建的，你不需要跟踪最后一个元素是什么，那么你可以尝试添加一个div进入最后一个可以作为后填充的 LI。

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

CSS:

    .clipper{
        width:50%;
        height:100%;
        background:black;
        position:absolute;
        right: -17.5%;
        transform: skew(35deg);
        -webkit-transform: skew(-35deg);        
        -moz-transform: skew(-35deg);
        -ms-transform: skew(-35deg);
        -o-transform: skew(-35deg);
        z-index: 1;
    }

Here is an example.