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>

CSS how to make special div shape