使用 CSS 水平翻转图像

Question

我正在尝试构建一个框架。我正确地完成了上边缘，但是在做左边缘时它不能正确输出。左边缘几乎是正确的，我只需要将它从当前位置水平翻转即可。

您能帮我翻一下，并提供一个关于您的答案（sn-p 预览）或 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>

将 transform-origin 更改为右上角并将元素放置在左侧。 演示：http://jsfiddle.net/GCu2D/3568/