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

【问题标题】：sKew Issue: How to transform with sKewsKew 问题：如何使用 sKew 进行转换
【发布时间】：2023-04-02 23:21:01
【问题描述】：

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

PSD

我的设计

我该如何解决这个问题？

【问题讨论】：

标签： transform skew

【解决方案1】：

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

.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;
}

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

这也适用于<li>。

如果您将文本保留在其中，则需要“撤消”转换，如上所示。

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

（类似问题here）

【讨论】：