0

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?

Instinct
  • 349
  • 1
  • 3
  • 10

1 Answers1

1

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 */
}
achudars
  • 1,486
  • 15
  • 25
  • Oohh I'm using chrome so guess I messed that part thanks! Anyway of setting the text portion to the opposite skew or anything to keep it normal? – Instinct Jul 14 '13 at 05:04
  • 1
    the simplest way to keep text normal: http://stackoverflow.com/questions/10271438/reset-angle-of-text-in-skewed-div-using-css – achudars Jul 15 '13 at 09:57