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

Posted 2023-03-05

【中文标题】将图像背景放在 CSS 三角形上

【英文标题】：Putting an image background onto a CSS Triangle

【发布时间】：2013-05-08 06:33:45

【问题描述】：

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

【问题讨论】：

正在尝试；但是如果你已经在使用图像，为什么不制作三角形图像和透明divs 并将它们放在角落里？

因为它采用响应式布局。三角形的宽度取决于屏幕上的大小。尽管如此，你的想法仍然有优点——我可以让它们变得异常长，这样它们在所有屏幕尺寸上都可以正常工作。感谢您的建议。

***.com/questions/23758922/transparent-arrow-triangle

【参考方案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 三角形非常适合制作偶尔出现的箭头形状，但对于比这更复杂的东西，使用适当的图形比尝试在 CSS 代码中堆砌越来越多的技巧要容易得多。

【讨论】：

设置为接受的答案，非常简洁。感谢您提供的信息，尽管我最终采用的方法是使用具有透明度的 .PNG 来模拟效果。

【参考方案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，但我建议您使用固定的高度和宽度。