HTML/CSS 如何避免skew倾斜元素内部字体出现类斜体效果

方法1：子元素反向倾斜抵消 #

transform的skew效果会被子元素继承，你只需要在文字外层套一层行内块级标签，给标签添加反向的skew即可抵消倾斜效果：

修改后HTML #

<div class="container-fluid text-center h-100 ">
  <div class="row mt-3">
    <div class="col left-bar text-center mr-3 pt-5">
      <span>Find your favorite product</span>
    </div>
    <div class="col right-bar text-center ml-1 mt-5  pt-5">
      <span>In two easy steps</span>
    </div>
  </div>
</div>

新增CSS样式 #

.left-bar > span, .right-bar > span {
  /* 倾斜角度和父容器数值相同、方向相反，抵消倾斜效果 */
  transform: skew(30deg);
  /* 行内元素默认不支持transform，需转成行内块 */
  display: inline-block;
}

方法2：伪元素实现倾斜背景（更推荐） #

不需要修改原有HTML结构，把倾斜效果交给背景伪元素实现，容器本身不做倾斜，文字自然保持正常：

完整修改后CSS #

.left-bar {
  position: relative;
  z-index: 1;
  /* 移除原有的transform属性 */
  background-color: unset;
  color: whitesmoke;
  width: 250px;
  height: 250px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  float: left;
}
.left-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-30deg);
  background-color: #00A0DF;
  z-index: -1;
}

.right-bar {
  position: relative;
  z-index: 1;
  /* 移除原有的transform属性 */
  background-color: unset;
  color: whitesmoke;
  width: 250px;
  height:250px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  float: right;
}
.right-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-30deg);
  background-color: #425CC7;
  z-index: -1;
}

如果你需要仅实现形状单边倾斜，可以直接用clip-path属性自定义多边形形状，不需要用到skew，天然不会影响内部文字样式，示例代码如下：

/* 仅左侧单边倾斜示例 */
.shape {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

内容的提问来源于stack exchange，提问作者The Grumpy Lion