求纯CSS实现三行元素Skew角度对齐的解决方案

问题分析 #

你当前代码的核心问题是顶部斜条伪元素与中间背景的变换逻辑不统一，导致斜角无法对齐——两者的位移计算和变换原点没有匹配，最终出现角度偏差。

修正后的完整代码 #

HTML结构（补充底部条的类定义） #

<div class="slider">
  <div class="slider-single with-bg img">
    <div class="skew-bar skew-bar-top"></div>
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6 col-lg-6">
          -- 内容区域 --
        </div>
        <div class="col-md-6 col-lg-6">
          -- 内容区域 --
        </div>
      </div>
    </div>
    <div class="skew-bar skew-bar-bottom"></div>
  </div>
</div>

CSS代码（统一变换逻辑） #

.slider-single {
  position: relative;
  background: #f5f5f5;
  padding-top: 70px;
  padding-bottom: 70px;
  overflow: hidden; /* 裁剪斜条超出容器的部分，避免横向滚动 */
}

/* 中间蓝色斜背景 */
.slider-single::before {
  content: "";
  position: absolute;
  background: #0072c6;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  transform: skewX(-16deg) translateX(-50%);
  z-index: -1;
}

/* 通用斜条样式 */
.skew-bar {
  position: absolute;
  height: 40px;
  width: 150%; /* 加宽容器，避免skew后出现空白 */
  left: -25%; /* 偏移位置匹配中间背景的translateX(-50%)逻辑 */
  transform: skewX(-16deg); /* 统一斜角角度 */
}

/* 顶部深蓝色斜条 */
.skew-bar-top {
  top: 0;
  background: #21255d;
}

/* 底部斜条（可按需修改颜色） */
.skew-bar-bottom {
  bottom: 0;
  background: #21255d;
}

关键修正说明 #

• 给.slider-single添加overflow: hidden，自动裁剪斜条超出容器的部分，避免页面出现横向滚动条
• 斜条使用width:150%+left:-25%的组合，完美匹配中间背景translateX(-50%)的位移逻辑，确保斜角完全对齐
• 移除斜条的伪元素嵌套，直接对.skew-bar应用skewX(-16deg)，减少层级的同时保证变换逻辑与中间背景统一

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