如何用CSS实现从左下角起始的响应式斜切区块效果？

方法一：使用clip-path（推荐，简洁且自适应） #

直接通过clip-path定义区块的多边形形状，用百分比坐标确保在任何尺寸下都保持斜切比例，同时通过内边距避免文本与斜边重叠。

.cut {
  position: relative;
  /* 定义斜切形状：左上→右上→右下（75%高度处）→左下，形成左下角起始的斜切 */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  background-color: red;
  /* 内边距调整：加大底部padding，确保文本处于斜切区域之外 */
  padding: 2rem 1.5rem 4rem;
}

方法二：改进伪元素旋转方案 #

针对你原来的代码，通过修改变换原点和尺寸定位，解决缩放变形问题：

.cut {
  position: relative;
  overflow: hidden;
  /* 同样需要内边距避免文本被覆盖 */
  padding: 2rem 1.5rem 4rem;
}

.cut::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  /* 将变换原点设为左下角，确保旋转始终从该点起始 */
  transform-origin: bottom left;
  /* 旋转+横向缩放，确保旋转后完全覆盖父元素 */
  transform: rotate(-5deg) scaleX(1.1);
}

关键注意事项 #

• 调整clip-path的百分比（如100% 75%中的75%）或旋转角度，匹配你需要的斜切幅度
• 必须设置足够的底部内边距，保证文本不会进入斜切区域，避免重叠
• 两种方案都基于百分比/相对单位，可自适应所有页面尺寸

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