長いメニューでスライスされたイメージの中央部分を繰り返す方法は？

Question

長いテキストの場合、バックグラウンドは繰り返されません。

赤色/茶色の色は、全体としてスライスされた画像（中間部分がスライスされていない）、つまりその単一の画像です。

メニューが長くなるにつれて繰り返すことができるように中間部分をスライスしたとすれば、どのようにCSSに含めることができますか？

これは、現在、単一の画像をどのように含めるかです。単語全体が背景画像に覆われている

ul a:hover{ 
     background-image: url("<?php echo get_template_directory_uri()?>/images/slices/slanted-hover.gif"); 
     color:#fff; 
     background-repeat: no-repeat; 
     min-width: 50px; 
    } 

期待される結果、以下のように、：

まだ明らかでない場合は、こちらを参照してください。

私がやりたいすべては、

私は黒い矩形を繰り返す必要があります。理想的には、スライスすると画像が表示されます。だから私はメニューの背景として使用して（そこにすべての画像を入れて）、中間（黒い四角形）の繰り返しを繰り返すのですか？

Answer 1

IEを含むすべての主要なブラウザで動作するはずです。 CSS 2D transformとpseudo-elementsを使用する単純なトリックは正常に動作し、これらの2つの仕様は最新のブラウザーで広く使用されています。

マークアップに必要な唯一の変更は、適切なZ-インデックススタッキングが機能するように、追加の<span>要素にリンクテキストをラップすることです。

このトリックの唯一の注意点は、スキューを適用すると、スキューされた擬似要素の一部が親要素の境界ボックスからはみ出すことです。この突出はスキュー角とリンクの高さに依存しますが、<ul>要素に左右のパディングを設定することで、オーバーフローしないようにすることができます。

ul { 
 
    background-color: #eee; 
 
    list-style: none; 
 
    padding: 0 1.5rem; /* Spacing to account for skewed edges protruding out of box */ 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
ul li a { 
 
    color: #000; 
 
    float: left; 
 
    padding: .75rem 1.5rem; 
 
    position: relative; 
 
    transition: all .25s ease-in-out; 
 
} 
 
ul li a span { 
 
    position: relative; 
 
} 
 
ul li a::before { 
 
    background-color: #b13131; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    transform: skew(-10deg); 
 
    transition: all .25s ease-in-out; 
 
    opacity: 0; 
 
} 
 
ul li a:hover { 
 
    color: #fff; 
 
} 
 
ul li a:hover::before { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li><a href="#"><span>Item 1</span></a></li> 
 
    <li><a href="#"><span>Item 2 that is a little bit too long</span></a></li> 
 
    <li><a href="#"><span>Item 3</span></a></li> 
 
</ul>

Answer 2

ピュアCSSソリューション、あなたが実際にその目的のために任意の画像を使用する必要はありません> = 9

ul a { 
    position: relative; 
} 

ul a:hover::after { 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    top: 0; 
    right: -.8em; 
    bottom: 0; 
    left: -.8em; 
    background-color: red; 
    transform: skewX(-15deg); 
}