html - 如何让文字正常变形(平行四边形)？

Question

我有点困惑:我想创建一些平行四边形并将文本放入其中。但是当我将文本放入其中时，文本与平行四边形的形状对齐。这是我试过的

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

如您所见，我在类中创建了一个 Div，它创建了平行四边形。现在，如果我尝试将另一个 p 标签作为子标签放入包含该形状的 div 标签中，我的文本看起来不正常。有什么办法可以去除 child 的inerhit吗？所以我的文字看起来很正常还是有更好的方法？谢谢

Answer 1

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}
.parallelogram p{
  transform: skew(-20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

.parallelogram p{
  transform: skew(-20deg);
}