css3的那个变形 斜切 |css导航栏选中状态

.box {
transform: skew(30deg);
/*或*/
transform: skewX(30deg); /*只斜切x轴*/
}

上述代码中，大家使用transform属性对元素进行斜切，其中skew函数可以对元素同时斜切x轴和y轴，也可以使用skewX和skewY分别斜切x轴和y轴。

需要注意的是，skew和skewX的参数为一个角度值，可以是正数或负数，代表元素斜切的角度。当值为正数时，元素向右上方斜切；当值为负数时，元素向左下方斜切。

.box {
transform: skew(-20deg, 10deg);
}

大家还可以使用skew函数同时指定x轴和y轴的斜切角度，可以传入两个参数，第一个参数代表x轴方向的角度值，第二个参数代表y轴方向的角度值。

最后提醒一下，斜切虽然是一个简单的变形效果，但大家在使用时还是要根据实际场景进行选择，防止过度变形导致不良影响。