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

Question

我是 css sKew 的新手，我在执行此操作时将 <li>ALL</li> 转换为 -45deg 我的文本旋转得太厉害了，但我想让我的文本保持笔直，但是它也旋转了。截图。

PSD

我的设计

我该如何解决这个问题？

Answer 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>。

如果将文本保留在内部，则需要 "undo" 进行转换，如上所示。

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

(类似问题here)

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

sKew Issue: How to transform with sKew

transform

skew