如何在 CSS3 中实现梯形？答案

【问题标题】：How to achieve a trapezoid in CSS3?如何在 CSS3 中实现梯形？
【发布时间】：2016-05-10 18:50:08
【问题描述】：

我正在尝试在 CSS3 中实现以下容器。我尝试使用transform: skewY，但没有得到想要的结果。我知道我可以使用 3d 变换来实现它，但我想到了我们可爱的 Internet Explorer。我也尝试过使用伪元素，但我失去了它。有什么css规则可以增加右上角和右下角的高度吗？

JSFiddle

谢谢

【问题讨论】：

使用 SVG 能否满足您的要求？
我没有想要的结果：为什么？你能告诉我们你在小提琴中的尝试吗？
会为你倾斜或转换工作here
我很确定它已经在 SO 上讨论过几次。作为证明，可以找到（我的）相关答案here。
IE? IE6、IE7、IE8、IE9、IE10 和/或 IE11？

标签： css css-shapes

【解决方案1】：

您可以为此使用倾斜的伪元素（确保倾斜在伪元素上，而不是元素本身）：

div {
  position: relative;
  height: 200px;
  width: 80vw;
  margin: 10vw;
}
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  background: gray;
  z-index: -1;
}
div:before {
  content: "";
  position: absolute;
  height: 90%;
  width: 100%;
  left: 0;
  bottom: -20%;
  background: gray;
  -webkit-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  transform: skewY(-5deg);
  z-index: -1;
}
html {
  background: url(http://placekitten.com/g/300/300);
}

&lt;div&gt;Content!!&lt;/div&gt;

【讨论】：

是的，最后我做到了。感谢您的回复顺便说一句
@hambos22：很高兴能帮上忙。但是，我对这里的解决方案并不是 100% 满意，因为我认为它可能会在愚蠢的大屏幕上失真（但是我无法测试）。但是，如果您使用的是固定大小（px 等），那么这将是完美的。
我在大分辨率上对其进行了测试，并添加了查询。我为那些超过 100% (103%) 的宽度设置了宽度并调整了角度。还在包装器中添加了overflow-x:hidden，一切正常