html - 如何通过css放置弯曲的文字

Question

我正在从 PSD 构建一个网页。在那里，我看到了一些弯曲的文字。

看上面3张图。他们不是直线。它们有点弯曲/倾斜/歪斜。那么，如何通过 CSS 制作该文本？

Answer 1

似乎倾斜转换可以完成这项工作：MDN 上的 CSS3 skew

Answer 2

仔细观察，文本的基线不是弯曲的，而是旋转的。这种转换可以通过以下方式完成：

transform: rotate(5deg);

确保支持所有浏览器，例如：

-webkit-transform: rotate(5deg);

Answer 3

使用 CSS3 转换。确保您的目标浏览器支持它：http ://caniuse.com/#feat=transforms2d 此外，您可能需要使用前缀才能使其在所有浏览器中工作。

<p>Texty ipsum</p>

<style>
p {
    transform: rotate(-4deg);
}
</style>