将图像背景放到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小提琴,我怎么能让那个灰色部分也成为我选择的图像背景,而不是必须使用#111,#eee等颜色.

Answer 1

CSS中的三角形是一种黑客,通过显示元素边框的一部分来创建.因此,您看到的三角形不是元素本身,而是CSS边框.

边框不能使用普通的CSS background-image样式进行样式设置,这是您开始看到CSS三角形的局限性的原因,以及为什么它真的是一个黑客而不是一个好的技术.

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

border-image是一种CSS风格,可以满足您的期望; 它将图像放入元素的边框.由于CSS三角形是边框,您可以使用它将背景图像放到三角形上.

然而,事情确实变得复杂.该border-image风格的设计风格边框,不三角形; 它具有造型角和侧面的特征,并适当地拉伸图像.我没有用三角形试过它,但我可以预测它可能会有一些使它变得棘手的怪癖.但随意放手一搏.

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

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

CSS三角形非常适合制作偶尔的箭头形状,但对于任何比这更复杂的东西来说,使用正确的图形要容易得多,而不是试图在CSS代码中堆积越来越多的黑客.