У меня есть фрагмент кода ниже.
Я просто хочу сгенерировать угол top-left кадра, используя один фрагмент изображения.
Этот код отлично работает на: Firefox / Chrome, но НЕ хорошо работает на: Safari / Internet Explorer / Edge.
.frame {
width: 200px;
height: 300px;
}
.trapezoid-top, .trapezoid-left {
background-image: url("https://image.ibb.co/dNUCFd/fragment.png");
background-size: contain;
}
.trapezoid-top {
width: 200px;
height: 40px;
clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%);
transform-origin: top left;
transform: rotate(0deg);
}
.trapezoid-left {
width: 300px;
height: 40px;
margin-top: -40px;
clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%);
transform-origin: top left;
transform: rotate(90deg) scale(1, -1);
}
<div class="frame">
<div class="edge_top_left">
<div class="trapezoid-top"></div>
<div class="trapezoid-left"></div>
</div>
</div>
Вот как это должно быть:
И вот как это получилось: Safari / Internet Explorer / Edge:
На всякий случай, здесь у вас есть JSFiddle:
https://jsfiddle.net/0skhbhok/
Если это можно исправить, не могли бы вы изменить мой код, чтобы он работал на всех платформах?
Заранее спасибо!