Question

我正在尝试将背景图像放在使用CSS边框创建三角形的div上。这是我目前的努力。它可以用纯色工作，但在图像方面我很茫然。

HTML

<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：http://jsfiddle.net/aRS5g/9/

所以，看看那个JS Fiddle，我怎样才能让那个灰色部分成为我选择的图像背景，而不是必须使用＃111，#eee等颜色。

Answer 1

CSS中的三角形是一种黑客攻击，通过显示元素边框的一部分来创建。因此，您看到的三角形不是元素本身，而是CSS边框。

无法使用普通的CSS background-image样式设置边框样式，这是您开始看到CSS三角形的局限性的原因，以及为什么它真的是一种黑客而不是一种好的技术。

有一个可能适合您的CSS解决方案：border-image。

border-image是一种CSS风格，可以满足您的期望;它将图像放入元素的边框。由于CSS三角形是边框，因此您可以使用它将背景图像放到三角形上。

然而，事情变得复杂了。 border-image样式用于设计边框样式，而不是三角形;它具有造型角和侧面的特征，并适当地拉伸图像。我没有用三角形试过它，但我可以预测它可能会有一些使它变得棘手的怪癖。但随意试试吧。

border-image的另一个问题是浏览器支持。这是一种相对较新的CSS样式，并且在许多当前浏览器中完全不受支持，包括所有版本的IE。您可以在CanIUse找到完整的浏览器支持表。

由于所有这些问题，我建议如果你想在浏览器中绘制形状，你真的应该考虑删除CSS hacks，并使用SVG或Canvas。这些在大多数浏览器中都得到了很好的支持，显然支持您可能想要的所有绘图功能。

CSS三角形非常适合制作偶尔的箭头形状，但对于任何比这更复杂的东西，使用正确的图形要容易得多，而不是试图在CSS代码中堆积越来越多的黑客。

Answer 2

要为div提供背景图像，您必须添加css规则

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

所以你的班级.triangle看起来像这样

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

另外，根据您的背景图片，您应该设置背景重复。 repeat-x使图像向左和向右重复（x轴），而repeat-y重复上下图像（y轴）。如果您不想重复图像，请使用不重复，但我建议使用固定的高度和宽度。

将图像背景放到CSS三角形上

2 个答案: