css文字斜切效果怎么做出来的

设计团队出了个文字斜切效果，感觉挺不错的。斜切效果，就是将文字倾斜一定角度，并设置倾斜的轴心点。

斜切效果用 css 怎么写出来呢？

其实很简单，只需配合使用 transform skew 和 transform origin 即可。

示例：

<style>
    .demo {
        width: 300px;
        height: 120px;
        border: 1px solid blue;
        font-size: 40px;
        transform: skew(0, -10deg);
        transform-origin: left bottom;
    }
</style>

<div class="demo">
    海阔凭鱼跃<br/>
    天高任鸟飞
</div>

以上就是css文字斜切效果的实现方法，实际应用时，请根据自己的需求，调整对应的参数。

本文地址：https://www.tides.cn/p_css-text-oblique-cutting-effect