在CSS三角形上放置图像背景

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等颜色。

- user2380171

---

尝试一下；但是如果您已经在使用图像，为什么不制作三角形图像和透明的“div”，并将它们放在角落呢？ - Passerby

因为它是响应式布局，所以三角形的宽度取决于屏幕大小。尽管如此，您的想法仍然有价值 - 我可以使它们异常长，以便在所有屏幕尺寸上都能正常显示。感谢您的建议。 - user2380171

https://dev59.com/A2Ag5IYBdhLWcg3wS5aC - pathfinder

Answer 1

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

无法使用普通的CSS background-image样式来设置边框样式，这就是您开始看到CSS三角形的限制的地方，这也是为什么它真正是一种hack技术而不是一种好的技术。

有一个可能适用于您的CSS解决方案：border-image。 border-image是一种CSS样式，它可以将图像放入元素的边框中。由于CSS三角形是一个边框，因此您可以使用它来将背景图像放在三角形上。

但是，事情会变得复杂。 border-image样式是设计用于样式边框而不是三角形的，它具有用于样式边角和边的功能，并适当拉伸图像的功能。我没有尝试过它与三角形一起使用，但我可以预测它可能有一些怪癖，使其难以使用。但是请随意尝试。 border-image的另一个问题是浏览器支持。它是一个相对较新的CSS样式，在许多当前浏览器中完全不受支持，包括所有版本的IE。您可以在 CanIUse上查看完整的浏览器支持表。

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

CSS三角形非常适合制作偶尔需要的箭头形状，但对于任何更复杂的东西，使用适当的图形比尝试将越来越多的hack技术添加到您的CSS代码中要容易得多。

- Spudley

---

虽然我最终采用了带透明度的 .PNG 来模拟这种效果，但感谢您提供的信息。 - user2380171

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轴）方向上重复。如果您不想重复图像，只需使用no-repeat，但我建议您使用固定的高度和宽度。

- RynoZ