修改按钮形状时内部文字同步变形，内嵌span无效求解决方案

嘿，我太懂这个坑了！你用transform: skewX(-18deg)给按钮做斜切变形时，这个样式会作用于按钮内部的所有元素，包括文字，所以文字也跟着歪了。你嵌套<span>的思路完全正确，只是少了关键的一步——给<span>加反向的斜切变形，还要确保<span>能应用transform样式！

正确的解决方案 #

核心思路是：让按钮容器保持斜切效果，然后用内部的<span>反向斜切，抵消按钮的变形，让文字回到正常水平状态。

修改后的CSS代码

.btn {
  border-radius: 0px;
  border: none;
  padding: 0.66em 4em;
  color: rgb(68, 114, 241);
  cursor: pointer;
  background-color: #FFF;
  border: 1px solid rgb(45, 110, 206);
  font-size: 1em;
  transform: skewX(-18deg);
  overflow: hidden; /* 可选：防止span内容超出斜切后的按钮边界 */
}

.btn span {
  display: inline-block; /* 行内元素无法应用transform，必须设置为行内块/块级 */
  transform: skewX(18deg); /* 反向斜切，抵消按钮的变形 */
}

修改后的HTML代码

<button class="btn"><span>click me</span></button>

为什么之前的span没效果？ #

因为<span>默认是行内元素，CSS的transform属性对行内元素不起作用！所以必须给<span>设置display: inline-block或者display: block，这样transform才能生效，再加上反向的skewX(18deg)，文字就会恢复正常啦～

内容的提问来源于stack exchange，提问作者Med Lamrouah