Привет!
Подскажите как можно адекватно сделать такой блок?
https://take.ms/o4xGv
В нем используется 2 изображения
Текущий вариант
<div class="image-wrapper image-wrapper--absolute">
<figure>
<svg height="325" viewBox="0 0 435 325" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0 0H434.406L292.054 324.632H0V0Z" fill="url(#pattern9)"/>
<defs>
<pattern id="pattern9" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image9" transform="translate(-0.0604752) scale(0.000583828 0.00078125)"/>
</pattern>
<image id="image9" width="1920" height="1280" xlink:href="/images/content/en/img_60_1.jpg"/>
</defs>
</svg>
</figure>
<!-- <div class="image-wrapper__line"></div> -->
<figure>
<svg height="325" viewBox="0 0 487 325" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M487 324.632H0.0522379L142.404 -5.48363e-06H487V324.632Z" fill="url(#pattern8)"/>
<polygon fill="#FFFFFF" points="152.4,-0.3 142.2,-0.3 -0.2,324.3 10.1,324.3 "/>
<defs>
<pattern id="pattern8" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image8" transform="translate(1 1.0625) scale(0.00078125 0.00117187) rotate(180)"/>
</pattern>
<image id="image8" width="1920" height="1280" xlink:href="/images/content/en/img_60_2.jpg"/>
</defs>
</svg>
</figure>
</div>
В хроме все хорошо, а вот в ие проблемы. Что можно сделать еще?
