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

CSS3 - making parallelogram pieces for vertical nav bar

CSS3 - making parallelogram pieces for vertical nav bar

Problem

I'm just been learning some HTML5/CSS3/JS and part of jQuery recently so still a noob to it for the most part but trying to make a navigation bar that's a bunch of parallelogram blocks stacked vertically, so far just messing around this is what I have for each block but this makes them rectanges and I was looking to push the top of each box over to create a parallelogram look:

.nav {
    background-color: blue;
    border: 1px solid black;
    border-radius: 3px;
    margin: 2px;
    text-align: center;
    font-family: Verdana;
    font-weight: bold;
    font-size: 1em;
    color: yellow;
    padding: 15px;
    cursor: pointer;
}

I saw something about using 'transform: skew(xdeg)' but it didn't seem to affect anything, maybe I wasn't implementing it correctly?

Problem courtesy of: Instinct

Solution

Have you tried:

.nav {
 /*all your properties */
 transform: skew(30deg);
 -o-transform: skew(30deg); /* Opera */
 -ms-transform: skew(30deg); /* IE 9 */
 -webkit-transform: skew(30deg); /* Safari and Chrome */
}
Solution courtesy of: acudars

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

CSS3 - making parallelogram pieces for vertical nav bar

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×