CSSまたは画像を片面に見えるようにするdiv

Question

私はliタグとli：hoverで使用する次の画像を持っています。 http://imgur.com/a/k9CK1

ナビゲーションバーのタブ付きの外観に使用しています。それは正常に動作しますが、私はテキストの面でより大きいいくつかのリンクを持っているので、それは合わない。ナビゲーション用に複数の画像を作成する代わりに、CSS3や背景タイリングを使って必要なときに左側が広がるようにする方法があるのだろうかと思います。あなたはスライドドアの技術を使用することができます

<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

：

は、ここでHTML（ERB）私が持っているのです。 alistapartの古典的な例があります。あなたのテキストは傾斜エリアを含むボックスの中に拡張する必要がない場合 http://www.alistapart.com/articles/slidingdoors/