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; }