菱形div菜单

Question

我试图创建一个菱形样式的链接菜单，它横跨页面水平。 我也会有一些这样的java脚本下拉菜单。像这样的东西：\ \ \ \ \

我在div上使用skew css3属性，但他们倾斜的文本以及有没有办法联合国 - 在div中的文字？香港专业教育学院试图在一个div div但没有运气。我怎么能得到这个在ie7/8工作？

<div id="menu"> 
       <div class="MenuOptions"><div class= "menuRot"><a>Menu</a></div></div> 
       <div class="MenuOptions"></div> 
       <div class="MenuOptions">Menu 3</div> 
       <div class="MenuOptions">Menu 4</div> 
       <div class="MenuOptions">Menu 5</div> 
       <div class="MenuOptions">Menu 6</div> 
    </div> 

**CSS** 

.MenuOptions{ 

    height:50px; 
    width: 100px; 
    float: left; 
    position: relative; 
    transform: skew(35deg); 
    -webkit-transform: skew(35deg); 
    -moz-transform: skew(35deg); 
    -ms-transform: skew(35deg); 
    -o-transform: skew(35deg); 
    border: 1px solid red; 
    background-color: #d6dd31; 
}​ 
.menuRot{ 
    transform: skew(-35deg); 
    -webkit-transform: skew(-35deg); 
    -moz-transform: skew(-35deg); 
    -ms-transform: skew(-35deg); 
    -o-transform: skew(-35deg); 
} 

非常感谢

Answer 1

你的代码工作。我复制你的代码，并与萤火虫检查了一下，发现一些奇怪...

与此更换你的CSS。

.MenuOptions{ 

    height:50px; 
    width: 100px; 
    float: left; 
    position: relative; 
    transform: skew(35deg); 
    -webkit-transform: skew(35deg); 
    -moz-transform: skew(35deg); 
    -ms-transform: skew(35deg); 
    -o-transform: skew(35deg); 
    border: 1px solid red; 
    background-color: #d6dd31; 
} 

.menuRot{ 
    transform: skew(-35deg); 
    -webkit-transform: skew(-35deg); 
    -moz-transform: skew(-35deg); 
    -ms-transform: skew(-35deg); 
    -o-transform: skew(-35deg); 
}