如何实现响应式的背景倾斜过渡区域？

你当前的问题出在sec2的固定宽度（91.5%）和变换逻辑上，窗口缩放时旋转后的元素无法完全覆盖视口宽度，导致右侧露出多余区域。以下是几种可靠的响应式实现方案：

方案一：修复现有结构，确保旋转元素全屏覆盖 #

给最外层容器（比如body）添加overflow-x: hidden（之前没生效大概率是没作用在正确的容器上），同时调整sec2的宽度和变换原点，让它始终超出视口范围，避免露出边缘：

body {
  margin: 0;
  overflow-x: hidden; /* 关键：全局隐藏横向溢出 */
}

.sec1 {
  height: 50vh;
  background-color: blue;
}

.sec2 {
  height: 20vh;
  width: 150%; /* 设为超过100%，确保旋转后覆盖全屏 */
  background-color: red;
  transform: rotate(-4deg) scaleX(1.1);
  transform-origin: left center; /* 以左侧为旋转中心，避免右侧偏移 */
  margin: -4vw 0 -4vw -25%; /* 负margin向左偏移，抵消宽度超出部分 */
}

.sec3 {
  height: 50vh;
  background-color: red;
}

方案二：用clip-path实现倾斜过渡（更简洁，无需额外section） #

直接通过clip-path给第一个section底部添加倾斜效果，不需要中间的sec2，代码更简洁且完全响应式：

body {
  margin: 0;
}

.sec1 {
  height: 50vh;
  background-color: blue;
  /* 底部向左倾斜的裁剪路径，数值可调整倾斜角度 */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.sec3 {
  height: 50vh;
  background-color: red;
  margin-top: -10vh; /* 与sec1的倾斜部分重叠，保证无缝过渡 */
}

你可以修改clip-path里的百分比数值，灵活控制倾斜的角度和幅度，这种方式不会产生溢出问题，完全适配各种窗口尺寸。

方案三：用伪元素实现过渡效果 #

给sec1添加::after伪元素作为倾斜过渡层，无需额外DOM元素：

body {
  margin: 0;
}

.sec1 {
  height: 50vh;
  background-color: blue;
  position: relative;
  overflow: hidden;
}

.sec1::after {
  content: '';
  position: absolute;
  bottom: -10vh;
  left: 0;
  width: 110%;
  height: 30vh;
  background-color: red;
  transform: rotate(-4deg);
  transform-origin: left bottom;
}

.sec3 {
  height: 50vh;
  background-color: red;
}

为什么你之前的overflow-x:hidden没生效？ #

如果仅给sec2或父级section添加该属性，由于sec2是经过变换的元素，溢出部分可能不在该容器的裁剪范围内，给body或最外层容器添加才能全局隐藏横向溢出。

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