Html 将图像背景置于CSS三角形上

我试图把一个背景图像放在一个div上，这个div使用CSS边框来创建一个三角形。这是我目前为止所做的努力。它可以很好地与纯色搭配，但当涉及到图像时，我不知所措

HTML

jsfiddle：

---

那么，看看这个JS提琴，我如何让灰色部分也成为我选择的图像背景，而不是使用诸如#111、#eee等颜色。

要给一个div一个背景图像，你必须添加css规则

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

你们班，三角形应该是这样的

.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中的三角形是一种破解，通过显示元素边框的一部分创建。因此，您看到的三角形不是元素本身，而是CSS边框

无法使用常规CSS

背景图像

样式设置边框样式，这就是您开始看到CSS三角形的局限性的地方，也是为什么它实际上是一种黑客而不是一种好技术的原因

有一个CSS解决方案可能适合您：

边框图像

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

然而，事情确实变得复杂了。

边框图像

样式用于设置边框样式，而不是三角形样式；它具有设置角和边的样式以及适当拉伸图像的功能。我还没有试过用三角形，但我可以预测它可能有一些怪癖，使它难以使用。但请随意试一试

边框图像的另一个问题是浏览器支持。这是一种相对较新的CSS样式，在许多当前浏览器中完全不受支持，包括IE的所有版本。您可以在上看到它的完整浏览器支持表

由于所有这些问题，我建议如果你想在浏览器中绘制形状，你真的应该考虑删除CSS HACK，并使用SVG或画布。这些功能在大多数浏览器中都得到了很好的支持，并且显然支持您可能需要的所有绘图功能
CSS三角形非常适合制作偶尔出现的箭头形状，但对于任何比这更复杂的东西，使用正确的图形比试图在CSS代码中添加越来越多的黑客要容易得多。
trying；但是，如果您已经在使用图像，为什么不制作三角形图像和透明的
div
s，并将它们放在角落里呢？因为它位于响应性布局上。三角形的宽度取决于屏幕上的大小。尽管如此，你的想法仍然有优点——我可以让它们非常长，这样它们在所有屏幕尺寸上都会很好。谢谢你的建议。设置为可接受的答案，非常简洁。感谢您提供的信息，尽管我最终选择了使用透明的.PNG来模拟效果。
background-image:url("your image url here");

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