html - CSS 或图像做一个 5sided looking div

Question

我在 li 标签和 li:hover 上使用了以下图像。 http://imgur.com/a/k9CK1

我将它们用于导航栏的选项卡式外观。它工作正常，但我确实有一些链接在文本方面更大，所以它不适合。我想知道是否有一种方法可以使用 CSS3 或背景平铺来实现它，以便在需要时左侧拉伸(stretch)得更宽，而不是为导航制作多个图像。

这是我的 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可以这样做，如果您的文本不需要延伸到包含倾斜区域的框中。