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

Question

我是css sKew的新手，我把我的<li>ALL</li>转换成-45 did当我这样做的时候我的文本太旋转了，但是我想保持我的文本是直的，但是它也旋转了。ScreenShot。

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

如果您将文本保存在内部，您需要“撤消”转换，如上面所示。

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

(类似问题here)