CSS如何制作特殊的div形状

Question

知道如何制作这样的div形状吗？

Answer 1

只需创建一个矩形并使用CSS3 transform property倾斜Y轴。

在这种情况下，transform: skewY(-20deg)将起作用。

.shape {
    border: 2px solid;
    height: 200px;
    width: 100px;
    transform: skewY(-20deg);
    margin: 2em 0;
}

<div class="shape"></div>

Answer 2

这适用于所有现代浏览器，并且会在旧浏览器中回退到矩形。

.skewed {
  border: solid 5px black;
  height: 200px;
  margin-top: 50px;
  width: 100px;
  transform: skewY(-30deg);
}

<div class="skewed"></div>