CSS or images to do a 5sided looking div

I have the following ima开发者_C百科ges that i use on li tags and li:hover. http://imgur.com/a/k9CK1

I'm using them for a tabbed look to a navigation bar. It works fine, but I do have some links that are larger in terms of text, so it doesn't fit. Instead of making multiple images for the navigation, I'm wondering if there is a way using CSS3 or background tiling to have it so the left side stretches wider when needed.

Here's the HTML(erb) i have:

<nav>
  <ul>
    <li><%= link_to 'Home', root_path %></li>
    <li><%= link_to 'Articles', articles_path %></li>
    <li><%= link_to 'About Us', about_us_path %></li>
    <li><%= link_to 'Zen Moments', zen_moments_path %></li>
    <% if current_user %>
      <li><%= link_to 'Logout', destroy_user_session_path %></li>
    <% end %>
  </ul>
</nav>

CSS3 border-image could do this, if your text doesn't need to extend into the box containing the sloping area.

You can use a sliding door technique. There is a classic example on alistapart. http://www.alistapart.com/articles/slidingdoors/