如何使用纯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>

编辑：我个人虽然使用精灵。