使用CSS水平翻转图像

我正试图建立一个框架。我正确地处理了上边缘，但在处理左边缘时，它没有正确地输出。左边缘几乎是正确的，我只需要从当前位置水平翻转它

你能帮我翻转一下，并提供一个关于你的答案（代码片段预览）或JSFIDLE的工作示例吗

。梯形顶部{
宽度：400px；
高度：100px；
背景图像：url（'https://image.ibb.co/e5Kaw7/image.png');
背景尺寸：包含；
剪辑路径：多边形（0,100%0，计算（100%-100px）100%，100px 100%）；
变换原点：左上角；
变换：旋转（0度）；
}
.左梯形{
宽度：600px；
高度：100px；
利润上限：-100px；
背景图像：url（'https://image.ibb.co/e5Kaw7/image.png');
背景尺寸：包含；
剪辑路径：多边形（0,100%0，计算（100%-100px）100%，100px 100%）；
变换原点：左上角；
变换：旋转（90度）；
}

试试这个：

CSS:

HTML:

将“变换原点”（transform origin）更改为右上角，并将图元放置在左侧。

---

演示：

如果您在编辑器中使用该片段，可能会在此处运行演示的副本。

.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);
}

<div class="container">
  <div class="trapezoid-top"></div>
  <div class="trapezoid-left"></div>
</div>