背景图像使用裁剪路径的替代方案

Question

我试图让一个三角形的背景图像覆盖一个全宽的图像。

​

​

使用边框、边框颜色和背景图像制作三角形背景图像非常容易，如下所示：

border-width: 350px 50vw 0px 0px;
border-color: white transparent transparent transparent;
background-image: url(/img/rainbow4.jpg);

但是，由于存在不能覆盖在另一张图像上的空白区域，因此会得到以下http://codepen.io/anon/pen/ENVWRz

如果设置：

border-color: transparent transparent transparent transparent;

然后图像将显示为正方形，所以这不起作用。

我已经设法使用clip-path让它工作了，但这在很多浏览器上的支持率非常低-所以我尽量避免使用这种方法。

Answer 1

你也可以看一下混合混合模式或背景混合模式，但使用起来也很棘手，而且还不太受支持。

​

div.triangle_test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 350px 50vw 0px 0px;
  border-color: white transparent transparent transparent;
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  background-image: url('http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg');
}
div.full_width {
  mix-blend-mode: darken;
  background-image: url('http://somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg');
  width: 100%;
  height: 350px
}

<div class="triangle_test"></div>
<div class="full_width"></div>

​

http://codepen.io/gc-nomade/pen/JRdEVO