flipping an image horizontally with CSS - css

Question

I'm trying to build a frame. I did the top edge properly, but when doing the left edge it doesn't output properly. The left edge is almost correct, I just need to flip it horizontally from its current position.
Could you flip it for me and provide me a working example on your answer (snippet preview) or JSFiddle?
.trapezoid-top {
width: 400px;
height: 100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(0deg);
}
.trapezoid-left {
width: 600px;
height: 100px;
margin-top: -100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(90deg);
}
<div style="margin:0 100px;">
<div class="trapezoid-top"></div>
<div class="trapezoid-left"></div>
</div>
Thanks!

Answer 1

Try this:
CSS:
.container {
position: relative;
margin: 0 100px;
}
.trapezoid-top {
width: 400px;
height: 100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(0deg);
}
.trapezoid-left {
width: 600px;
height: 100px;
margin-top: -100px;
background-image: url(https://image.ibb.co/e5Kaw7/image.png);
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top right;
transform: rotate(-90deg);
position: absolute;
right: calc(100% - 16px);
}
HTML:
<div class="container">
<div class="trapezoid-top"></div>
<div class="trapezoid-left"></div>
</div>
Change transform-origin to top right and position the element to place it on left.
Demo: http://jsfiddle.net/GCu2D/3568/