clip-path隐藏元素仍占页面长度，右侧斜边框实现遇阻求助

针对你遇到的旋转伪元素导致页面高度冗余、滚动条的问题，这里有几个可行的解决方案，兼顾动态高度和全屏宽度需求：

方案一：优化伪元素定位与旋转中心（保留动画） #

你之前的伪元素设置了过大的高度和偏移，导致布局盒模型超出父容器，即使视觉裁剪也会占用页面空间。调整旋转中心和尺寸，结合父容器的overflow:hidden就能解决：

#header_block_unlimited {
  position: relative;
  overflow: hidden;
  /* 保持你的全屏宽度样式：margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; */
}

#header_block_unlimited:before {
  content: '';
  position: absolute;
  width: 120%;
  height: 100%;
  right: -10%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 1s;
  transform: rotate(5deg);
  transform-origin: top right; /* 关键：从右上角旋转，避免底部过度延伸 */
}

#header_block_unlimited:after {
  content: '';
  position: absolute;
  width: 120%;
  height: 100%;
  right: -12%;
  top: 0;
  background-color: #F95E62;
  transform: rotate(5deg);
  transform-origin: top right;
}

为什么有效： #

• transform-origin: top right让伪元素从右上角旋转，旋转后只会向右延伸，不会向下超出父容器的高度范围
• 父容器的overflow:hidden会裁剪掉右侧的冗余部分，且不会产生X轴滚动条（因为全屏宽度的容器已经占满视口）
• 伪元素的高度设为100%，布局上不会超出父容器，解决footer下方的间隙问题

方案二：用线性渐变实现（最简洁，无布局冗余） #

如果不需要伪元素的过渡动画，用linear-gradient可以更高效地实现双层斜边框，完全没有额外布局元素：

#header_block_unlimited {
  position: relative;
  /* 你的全屏宽度样式 */
  background-image: 
    /* 实色斜边框 */
    linear-gradient(95deg, transparent calc(100% - 2px), #F95E62 calc(100% - 2px), #F95E62 100%),
    /* 半透明斜边框（比实色宽2px） */
    linear-gradient(95deg, transparent calc(100% - 4px), rgba(255,255,255,0.4) calc(100% - 4px), rgba(255,255,255,0.4) 100%);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
}

优势： #

• 完全基于背景实现，不占用额外DOM或布局空间，动态高度自动适配
• 性能更好，没有transform带来的渲染开销
• 可以通过调整linear-gradient的角度、宽度值来精确控制边框的倾斜度和厚度

方案三：精确裁剪伪元素（适合复杂形状） #

如果坚持用伪元素旋转，也可以给伪元素本身设置clip-path，直接裁剪掉冗余部分，避免布局空间浪费：

#header_block_unlimited:before,
#header_block_unlimited:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  right: -38%;
  top: 0;
  transform: rotate(5deg);
  transform-origin: top right;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 裁剪为矩形，只保留父容器内的部分 */
}

#header_block_unlimited:before {
  background-color: rgba(255,255,255,0.4);
  transition: all 1s;
}

#header_block_unlimited:after {
  background-color: #F95E62;
  right: -40%;
}

注意： #

• 这里的clip-path直接作用在伪元素上，只保留需要的区域，布局上不会超出父容器的高度
• 配合transform-origin: top right，可以让裁剪后的形状刚好贴合父容器右侧

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