使用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>

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