如何用CSS实现这种对角线下拉效果？

Question

我正在尝试在CSS中实现下拉效果，就像你在这个JPG中看到的那样..任何想法如何做到这一点？只需要弄清楚如何使它对角...谢谢！

Answer 1

查看http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/ - 这应该指向正确的方向！

Answer 2

尝试这可能有帮助

<ul class="menu">
    <li ><p class="inner">Item 1</p>
        <ul>
            <li  class="inner">sub menu 1</li> 
            <li class="inner">sub menu 2</li>   
            <li class="inner">sub menu 3</li>   
            <li class="inner">sub menu 4</li>               
        </ul>     
    </li>
    <li class="inner"><p class="inner">Item 2</p>
        <ul>
            <li class="inner">sub menu 1</li> 
            <li class="inner">sub menu 2</li>   
             <li class="inner">sub menu 3</li>   
            <li class="inner">sub menu 4</li>               
        </ul>     
    </li>
</ul>
​

CSS：

.menu{
   margin:20px;
}
.menu > li {
    margin:0px 10px;            
    width:70px;
    display:inline-block;
    float:left;
    width: 120px;
    height: 100px;
    -webkit-transform: skew(-20deg,0);
       -moz-transform: skew(-20deg,0);
         -o-transform: skew(-20deg,0);     
            -ms-transform: skew(-20deg,0);   
              transform: skew(-20deg,0);  
}
.menu>li:hover{
   background: #4BA2E9;
   color:white;
}
.menu li:hover  ul {
   display:block;
 }

.menu li ul{
    display:none;
    color:Blue;
}
.inner{
        -webkit-transform: skew(20deg,0);
           -moz-transform: skew(20deg,0);
             -o-transform: skew(20deg,0); 
               -ms-transform: skew(20deg,0);   
                  transform: skew(20deg,0);  
}

DEMO

Answer 3

这可能是一个起点：http://jsfiddle.net/XWHR5/2/

我从这里得到了这个基本的CSS菜单设置：http://www.handy-html.com/create-a-simple-css-dropdown-menu/

使用此链接制作不同的背景形状：http://www.paulund.co.uk/how-to-create-different-shapes-in-css

有一些工作需要以线性方式排列平行四边形（在我的小提琴中没有照顾）