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

我正在尝试将背景图像放在使用 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 等颜色。

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

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

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

border-image是一种符合您期望的 CSS 样式；它将图像放入元素的边框中。由于 CSS 三角形是一个边框，因此您可以使用它在三角形上放置背景图像。

然而，事情确实变得复杂。这border-imagestyle 旨在设置边框样式，而不是三角形；它具有对角和侧面进行造型以及适当拉伸图像的功能。我还没有用三角形尝试过，但我可以预测它可能有一些怪癖，使其使用起来很棘手。但请随意尝试一下。

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

由于所有这些问题，我建议如果您想在浏览器中绘制形状，您确实应该考虑放弃 CSS hack，并使用 SVG 或 Canvas。大多数浏览器都很好地支持这些功能，并且显然支持您可能需要的所有绘图功能。

CSS 三角形非常适合制作偶尔的箭头形状，但对于比这更复杂的东西，使用正确的图形比尝试在 CSS 代码中堆砌越来越多的技巧要容易得多。