CSS how to make special div shape

Any idea how to make the div shape like this ?

enter image description here


Just create a rectangle and skew the Y axis using the CSS3 transform property.

In this case, transform: skewY(-20deg) will work.

.shape {
  border: 2px solid;
  height: 200px;
  width: 100px;
  transform: skewY(-20deg);
  margin: 2em 0;
<div class="shape"></div>