@drtvader
Вечный студент

Как адекватно сделать такой блок с изображениями?

Привет!
Подскажите как можно адекватно сделать такой блок? 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>


В хроме все хорошо, а вот в ие проблемы. Что можно сделать еще?
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы