CSS или изображения, чтобы сделать 5-сторонний вид div

Question

У меня есть следующие изображения, которые я использую для тегов li и li: hover.http://imgur.com/a/k9CK1

Я использую их для просмотра вкладок на панели навигации.Он работает нормально, но у меня есть некоторые ссылки, которые больше по тексту, поэтому он не подходит.Вместо того, чтобы создавать несколько изображений для навигации, мне интересно, есть ли способ использовать CSS3 или фоновую мозаику, чтобы левая сторона растягивалась по мере необходимости.

Вот HTML (erb), который у меня есть:

<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 может сделать это, если ваш текст не должен расширяться в поле, содержащее наклонную область.

Answer 2

Вы можете использовать технику раздвижных дверей.На алистапарте есть классический пример.http://www.alistapart.com/articles/slidingdoors/