переворачивание изображения по горизонтали с помощью CSS

Question

Я пытаюсь построить каркас. Я правильно сделал верхний край, но при выполнении левого края он не выводится должным образом. Левый край почти правильный, мне просто нужно отразить его горизонтально от его текущего положения.

Не могли бы вы отразить это для меня и предоставить рабочий пример своего ответа (предварительный просмотр фрагмента) или 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>

Спасибо!

Answer 1

Попробуйте это:

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>

Измените источник преобразования в верхний правый угол и поместите элемент, чтобы поместить его слева. Демо: http://jsfiddle.net/GCu2D/3568/