sKew问题：如何使用sKew进行转换

Question

我是css sKew的新手，当我这样做时，我将<li>ALL</li>转换为-45deg我的文字太旋转了但是我想保持我的文本为直，但它也旋转了。 屏幕截图。

PSD

我的设计

我如何解决这个问题？

Answer 1

如果您想使用skew()，可以将文字放在div内并使用此CSS

＆＃13;

＆＃13;

.container {
  transform: skewX(-30deg);
  padding: 20px;
  width: 100px;
  background-color: black;
}

.content {
  width: 100px;
  color: white;
  transform: skewX(30deg);
  text-align: center;
  text-transform: uppercase;
}

＆＃13;

<div class="container">
    <div class="content">All</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这也适用于<li>。

如果您将文字保留在内部，则需要＆＃34;撤消＆＃34;转变，如上所示。

否则，您可以将文字放在<li>之外，这不受transform:skew()的影响。

（类似问题here）