如何用CSS實現這種對角線下拉效果？

Question

我想在CSS中實現下拉效果，就像你在這個JPG中看到的一樣。任何想法如何做到這一點？只需要弄清楚如何讓它走向對角線......謝謝！

Answer 1

退房http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/ - 這應該指向你在正確的方向！

Answer 2

這可能是一個起點：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

有一些的工作，需要以線性方式排列平行四邊形（這在我的小提琴中是不需要照顧的）

Answer 3

試試這個可能有幫助

<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