Slanted tabular menu with CSS3

Some of variables are hard coded. To make it flexible, you may want to use JavaScript. The demo is a vertical menu, but making a horizontal menu shouldn’t be difficult.

<div style="margin-top:100px;" class="slant">
    <div class="contents first">menu1</div>
</div>
<div class="slant second">
    <div class="contents">menu2</div>
</div>
div.slant {
    width: 150px;
    height: 100px;    
    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
    background: gold;
}
div.contents {
    -moz-transform: matrix(1, 0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, 0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, 0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, 0.2, 0, 1, 0, 0);
         transform: matrix(1, 0.2, 0, 1, 0, 0);
    background: transparent;
    padding-top: 20px;
}
div.first {
    background: gold;
    position: relative;
    top: -15px;
    min-height: 30px;
    padding: 0;
}
div.second {
     background: brown;   
}

Demo. CSS reference.

This entry was posted in Create. Bookmark the permalink. Both comments and trackbacks are currently closed.