skew() 是坐标系剪切而非视觉歪斜，导致文字真实几何变形；反向 skew 抵消有定位错位、叠加偏差和维护难三类问题；务实方案是伪元素画边框、SVG 隔离坐标系或小角度容忍失真；点击热区仍为原矩形，需用 clip-path 或扩大 padding 解决。
skew() 本质是坐标系剪切，不是视觉歪斜
它不是“把盒子推斜了”，而是对整个元素的坐标系统做线性变换：每个点的 X 坐标会按 Y 偏移量加权偏移，Y 坐标同理。文字作为子内容，自然跟着这个变形后的坐标系一起被拉伸、压扁——这不是渲染错觉，是真实几何变形。
常见错误现象：transform: skewX(15deg) 后，中文笔画变细、英文字符横向拉长、行高视觉压缩；用 getBoundingClientRect() 测量发现宽高没变，但 offsetWidth 和渲染像素已不一致。
反向 skew 抵消文字变形有硬伤
给父容器 skewX(15deg)，再给子文字层加 skewX(-15deg) 看似能“扶正”，但实际会引入三类问题：
- transform 是累积叠加的，子元素若再加其他 transform（如
translate或scale），计算顺序和矩阵乘法容易出偏差 - 子元素定位（如
position: absolute）仍基于父容器变形前的文档流，视觉位置和逻辑位置错位 - 伪元素或 SVG 图标等非文本内容无法简单套用反向 skew，样式维护成本陡增
真正只歪边框、不歪文字的务实方案
别让文字进 skew 的作用域。直接绕过变形主体：
立即学习“前端免费学习笔记（深入）”；
- 用
::before或::after伪元素画倾斜背景/边框，本体文字层完全不受影响 - 把倾斜效果拆到 SVG 中：
<svg><rect transform="skewX(15)" /><text>正文</text></svg>，SVG 内部坐标系隔离，文字保持原生渲染 - 小角度（±3deg 内）可接受轻微失真，比强行抵消更稳；超过 5deg 就该换设计语言，比如改用
rotateZ()+perspective模拟透视，事件区域和视觉才一致
skew 后点击区域仍是矩形，这点常被忽略
浏览器判定鼠标悬停、点击、:hover 时，完全无视 transform，只认元素未变形前的 boundingClientRect。你看到一个右上翘的卡片，实际必须对准它原本那个直角矩形区域才能触发交互——这在移动端尤其反直觉。
如果非要保留 skew 视觉又需要精准热区，clip-path: polygon() 是唯一 CSS 方案，但需手动算四个顶点坐标；更轻量的做法是扩大 padding 或用 outline 扩展命中区，别死磕像素级匹配。
