如何在CSS3中实现梯形？

Question

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

JSFiddle

谢谢

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

<div>Content!!</div>

如何在CSS3中实现梯形？

How to achieve a trapezoid in CSS3?

css

css-shapes