如何使 div 反向倾斜？

Question

我想做一个div这样的

其实是菜单栏设计的一部分。原来的菜单栏是

我试过我的 div 但它看起来像

我的代码是：

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

现在怎么办？

Answer 1

对 skewY() 使用负角并将 transform-origin 设置为 right top。

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

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

How to make a div skew in the reverse direction?