How to transform skew only towards bottom corners?

Question

I'm confused about how can I transform the corners in one side (top or bottom) only something like below:

Normal:

Transformed:

Can anyone please help me on this? Here, the top corners stay same and the bottom corners are transformed. How can I achieve this?

Answer 1

You can start with something like this, clean and simple without multiple divs.

#trapezium {
  width: 200px;
  height: 100px;
  margin: 50px;
  transform: perspective(100px) rotateX(-45deg);
  background-color: gray;
}

<div id='trapezium'></div>