如何在CSS3中实现梯形？

Question

我正在尝试在CSS3中实现以下容器。我试过transform: skewY，但我没有得到理想的结果。我知道我可以通过3d Transforms实现它，但我想到了我们可爱的Internet Explorer。我也尝试使用伪元素，但我失去了它。我可以说，是否有任何css规则可以增加顶部和右下角的高度？

JSFiddle

谢谢

Answer 1

你可以使用偏斜的伪元素（确保偏斜在伪，而不是元素本身）：

＆＃13;

＆＃13;

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

＆＃13;

<div>Content!!</div>

＆＃13;

＆＃13;

＆＃13;