I’m currently working on a web project where the vertical menus I designed, requires the parallelogram shapes. So, I tried to combined several shapes (triangle, trapezium, and parallelogram) and made them as vertical menus. The second level menu is only using the ‘parallelogram right’ CSS shape as the background of the ‹ul› tag. The Parallelogram Right CSS shape is built using skew transformation. It was not easy for me to work on this part, as the text is also slanted/skewed to the right.
Then I stumbled upon a discussion on StackOverflow, and finally found the solution to prevent the skew of the text when the parallelogram shape is used as background. The idea was to set the text styling so it’s skewed to the opposite direction of the parallelogram CSS shape.
Viewing on the Firefox and Opera browsers, you will not see the skewed text. But in Chrome and Safari browsers, I see that the second level menu text still skewed. I am not sure about this. Any feedback from you would be helpful :).
I’ve also noticed that the third level menu will have more skewed effect both for the shape and the text than the second level menu. Even I don’t need any third level menu yet, still it’s kind of intriguing for me. Why and how this is happened 😀
Check the live demo of what I’ve been working on so far in CodePen:
Live Demo
{code type=codetype}
ul#nav li a {
display: inline-block;
text-decoration:none;
padding:4px 10px;
border-radius:3px;
transform: skew(-10deg);
-o-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-webkit-transform: skew(-10deg);
color:#757575;
}
ul#nav li a span {
display: inline-block;
transform: skew(10deg);
-o-transform: skew(10deg);
-moz-transform: skew(10deg);
-webkit-transform: skew(10deg);
}
{/code}
