title: Parallelogram navigation background with CSS
body: <p>I'm trying to create this nav menu (green highlight is the active page, gray is hover state):</p>
  
  <p><img src="https://i.imgur.com/u7yH8.png" alt="Nav Menu"></p>
  
  <p>I can make the parallelogram with the following CSS:</p>
  
  <pre><code>ul#nav li a {
      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:hover {
      background:#f3f1eb;
  }
  
  ul#nav li a.current-menu-item {
      color:#fff;
      background:#5d9732;
  }
  
  ul#nav li a.current-menu-item:hover {
      background:#5d9732;
  }
  </code></pre>
  
  <p>Unfortunately, this causes the text to skew as well, appearing italic:</p>
  
  <p><img src="https://i.imgur.com/Uvl9T.png" alt="Nav Menu Skewed"></p>
  
  <p>Here's a jsfiddle showing the setup (although the skew doesn't work in jsfiddle): <a href="http://jsfiddle.net/K3bQJ/4/" rel="nofollow noreferrer">http://jsfiddle.net/K3bQJ/4/</a></p>
  
  <p>Is there any way to prevent the skew of the text, so it doesn't appear italic? I'm loading jQuery but would prefer to avoid it or at least have a usable CSS fallback.</p>
  
  <p>Thanks for any advice!</p>