Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Rhombus div menu

Rhombus div menu

Problem

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?

   

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

Problem courtesy of: davey

Solution

Your code works. I copied your code and checked it with firebug and found something strange...

Replace your CSS with this.

.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);
}
Solution courtesy of: Mossawi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Rhombus div menu

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×