画像の背景をCSSの三角形に置く

Question

CSSの枠線を使用している三角形を作成するdivに背景画像を配置しようとしています。これは私の現在の努力です。それは無地の色でうまく動作しますが、画像になると駄目です。

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div> 

CSS

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
} 

jsfiddle

HTML：そうhttp://jsfiddle.net/aRS5g/9/

は、その時に探して、どのように私は私の選択の灰色の部分は、画像の背景ということになるだろう、フィドルをJS ＃111、#eeeなどの色を使用する必要はありません。

Answer 1

CSSの三角形は、要素の境界線の一部を表示して作成されたハックです。したがって、表示される三角形は要素そのものではなく、CSS境界です。

通常のCSS background-imageスタイルを使用して境界線をスタイルすることはできません。ここでは、CSSの三角形の制限を見ていきます。また、実際には良いテクニックではなくハックです。

あなたのために役立つCSSソリューションがあります：border-imageです。

border-imageは、あなたが期待しているようなCSSスタイルです。要素の境界線に画像を配置します。 CSSの三角形は境界線なので、三角形の上に背景イメージを置くことができます。

しかし、物事は複雑になります。 border-imageスタイルは、三角形ではなく、境界線をスタイルするように設計されています。コーナーやサイドのスタイリング、適切な画像のストレッチ機能を備えています。三角形で試したことはありませんが、使用するのが難しいいくつかの欠点があると予測できます。しかし、それを自由にしてください。

border-imageのもう1つの問題は、ブラウザのサポートです。これは比較的新しいCSSスタイルであり、現在の多くのブラウザ（IEのすべてのバージョンを含む）では完全にサポートされていません。 CanIUseに完全なブラウザサポートテーブルが表示されます。

これらすべての問題のため、ブラウザで図形を描きたい場合は、CSSハックを削除し、SVGまたはCanvasを使用することを検討する必要があります。これらは、ほとんどのブラウザでうまくサポートされており、可能な限りすべての描画機能をサポートしています。

CSSの三角形は、時折矢印の形状を作るのに最適ですが、それより複雑なものは、CSSコードにもっと多くのハックを重ねるのではなく、適切なグラフィックを使う方が簡単です。

Answer 2

DIVあなたはだからあなたのクラス.triangleは、あなたが背景リピートを設定する必要があり、あなたの背景画像に応じて、また、この

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
} 

ようになりCSSルール

background-image:url("your image url here"); 

を追加する必要があります背景画像。 repeat-xは、イメージを左右に繰り返します（x軸）。repeat-yはイメージを上下（y軸）で繰り返します。イメージを繰り返したくない場合はno-repeatを使用しますが、固定の高さと幅を使用することをお勧めします。