How to make a div skew in the reverse direction?

Question

I want to make a div like this

it is actually a part of design of a menu bar. The original menu bar is

I have tried My div but it looks like

My code is:

<div style="width: 75px; height: 200px; background:#32859d; transform:skewY(40deg); ">
</div>

Now what to do?

Answer 1

Use a negative angle for skewY() and set the transform-origin as right top.

.skewed{
  height: 200px;
  width: 100px;
  background: teal;
  transform-origin: right top;
  transform: skewY(-30deg);
}

<div class='skewed'></div>