Альтернатива использованию клипа для фоновых изображений

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