Question

I have the following images that i use on li tags and li:hover. https://i.stack.imgur.com/myvRc.jpg

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>

Answer 1

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