parallelogram shape in css

I want to make a header menu background with the help of parallelogram shape in css.
Problem is my header menu text is also show in parallelogram style . I want my text style as a straight/normal.

Here is my css code:-

   -webkit-transform: skew(-60deg); 
   -moz-transform: skew(-60deg); 
   -o-transform: skew(-60deg);
   transform: skew(-60deg);
<div class="nav-bg">
         <ul class="nav navbar-nav"><li>test</li></ul>

Kindly advise me any solution.

Source: css3

Leave a Reply