純粋なCSSで下向き矢印アイコンを使って背景として使用する方法は？

Question

純粋なCSSを使用してこのような下矢印を背景として使用することは可能ですか？

実際のサイズの画像

拡大画像

私はそれが画像を使用することが可能です知っていると我々はborder tricksすぎ

#triangle-down { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
} 

でこの矢印を行うことができます

しかし、これをバックグラウンドとして使うことはできません。矢印をCSSの背景として使用する方法はありますか？

Answer 1

エレメントにCSSパターンを作成して、そのパターンを別のエレメントのCSSバックグラウンドとして使用することはできません。疑似要素を使用するか、HTML内に他の子要素を追加することで不正行為をすることはできますが、純粋なCSS背景画像は使用できません。

イメージを作成し、代わりにそれを背景イメージとして使用する必要があります。

Answer 2

ない、これはあなたが後にしているものですが、あなたはそれがそうのような背景として表示させることができるかどうかを確認します。

http://jsfiddle.net/spacebeers/8vHQF/1/

.container { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.triangle { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
    z-index: 0; 
} 

.content{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100px; 
    height: 100px; 
    z-index: 1; 
} 

<div class="container"> 
    <div class="triangle"></div> 
    <div class="content"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
</div> 

EDIT：個人的に私もスプライトを使用したいです。