如何使 div 反向倾斜？答案

【问题标题】：How to make a div skew in the reverse direction?如何使 div 反向倾斜？
【发布时间】：2016-06-10 14:29:34
【问题描述】：

我想做一个这样的div

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

我已经尝试过我的 div 但它看起来像

我的代码是：

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

现在该怎么办？

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

【解决方案1】：

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

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

&lt;div class='skewed'&gt;&lt;/div&gt;

【讨论】：