如何在反方向上产生div偏斜？

Question

我想制作像这样的div

它实际上是菜单栏设计的一部分。原始菜单栏是

我尝试过我的div，但看起来像是

我的代码是：

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

现在该怎么办？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;