将图像背景放到CSS三角形

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

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小提琴，我如何作出这样的灰色部分也是我喜欢的图片背景，而不是必须使用＃111，#eee等颜色。

来源

2013-05-14 user2380171

Trying;但如果你已经在使用图像，为什么不制作三角形图像和透明的'div's并把它们放在角落？ – Passerby 2013-05-14 05:17:19

因为它在响应式布局上。三角形的宽度取决于屏幕上的大小。尽管如此，你的想法仍然有其优点 - 我可以让它们变得非常长，以便它们在所有屏幕尺寸上均可以正常工作。感谢您的建议。 – user2380171 2013-05-14 05:22:30

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder 2015-07-10 06:09:06

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

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

有一个CSS解决方案可以为你工作：border-image。

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

但是，事情变得复杂。风格的设计风格是边框而不是三角形;它具有造型角和侧面的功能，并适当地拉伸图像。我没有用三角形尝试过，但我可以预测它可能有一些怪癖使得它很难使用。但随时可以放手。

border-image的其他问题是浏览器支持。这是一种相对较新的CSS风格，并且在许多当前的浏览器（包括所有版本的IE）中完全不受支持。您可以在CanIUse处看到完整的浏览器支持表。

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

CSS三角形是非常适合做偶尔的箭头形状，但是对于什么比它是一个更容易使用正确的图形，而不是试图堆积越来越多的黑客进入你的CSS代码更复杂。

来源

2013-05-14 06:59:22 Spudley

不错的答案，+1 – 2013-05-14 07:41:21

设置为接受的答案，非常简洁。感谢您提供的信息，尽管我最终走的路径是使用透明的.PNG来模拟效果。 – user2380171 2013-05-14 07:53:51

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder 2015-07-10 06:09:20

-5

给一个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轴）。如果您不想重复使用图片，请使用无重复图片，但我建议您使用固定的高度和宽度。

来源

2013-05-14 05:42:07 RynoZ

将图像背景放到CSS三角形

回答

相关问题