背景画像にclip-pathを使用する代わりに

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; 

画像が正方形で表示されるため、これは機能しません。

私はそれをクリップパスを使用して動作させることができましたが、これは多くのブラウザでサポートされていません。このアプローチを回避しようとしています。

Answer 1

mix-blend-modeまたはbackground-blend-modeを見てみることもできますが、使用するのは難しく、あまりサポートされていません。

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