I'm trying to create a Rhombus style links menu which goes horizontal across the page. I will also have some java script drop downs on this.Something like this: \ \ \ \ \
I am using the skew css3 attributes on the divs but they skew the the text as well is there a way to un-skew the text in the div? ive tried a div in a div but no luck. And how can i get this to work in 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);
}
Many thanks