如何用纯HTML/CSS实现斜向渐变背景并解决区块衔接问题

核心问题分析 #

你遇到的生硬衔接问题，本质是两个独立区块各自使用linear-gradient作为背景，相当于两个完全分离的背景图层。大屏上区块高度较大时，渐变的重复周期无法自然对齐，边缘直接截断，导致视觉上的割裂感。

最优方案：父容器统一背景 #

将斜向渐变条纹背景应用到两个区块的共同父容器，子区块设置透明背景，让整个背景保持连续，从根源上解决衔接问题。

代码实现 #

HTML结构

<div class="experience-wrapper">
  <div id="education">
    <!-- 教育经历内容 -->
    <h2>教育经历</h2>
    <p>XXX大学 - 计算机科学与技术专业</p>
  </div>
  <div id="professional-experience">
    <!-- 工作经历内容 -->
    <h2>工作经历</h2>
    <p>XXX公司 - 前端开发工程师</p>
  </div>
</div>

CSS样式

/* 父容器设置连续的斜向渐变条纹背景 */
.experience-wrapper {
  background: repeating-linear-gradient(
    45deg, /* 渐变角度，可按需调整 */
    #f5f5f5,
    #f5f5f5 12px, /* 第一条纹宽度 */
    #eeeeee 12px,
    #eeeeee 24px /* 条纹周期宽度 */
  );
}

/* 子区块透明背景，继承父容器背景 */
#education, #professional-experience {
  background: transparent;
  padding: 2.5rem;
  /* 可选：给区块加内边距、边框或阴影区分内容区域 */
  border-bottom: 1px solid #ddd;
}

#professional-experience {
  border-bottom: none;
}

备选方案：衔接过渡带（若需区块背景有差异） #

如果两个区块需要使用不同的渐变条纹，可在衔接处添加一个过渡带，用线性渐变实现颜色平滑过渡：

代码实现 #

HTML结构

<div id="education">
  <h2>教育经历</h2>
  <p>XXX大学 - 计算机科学与技术专业</p>
</div>
<div class="gradient-transition"></div>
<div id="professional-experience">
  <h2>工作经历</h2>
  <p>XXX公司 - 前端开发工程师</p>
</div>

CSS样式

#education {
  background: repeating-linear-gradient(
    45deg,
    #f5f5f5,
    #f5f5f5 12px,
    #eeeeee 12px,
    #eeeeee 24px
  );
  padding: 2.5rem;
}

#professional-experience {
  background: repeating-linear-gradient(
    45deg,
    #eeeeee,
    #eeeeee 12px,
    #e0e0e0 12px,
    #e0e0e0 24px
  );
  padding: 2.5rem;
}

/* 过渡带：实现两个区块背景色的平滑过渡 */
.gradient-transition {
  height: 30px;
  background: linear-gradient(to bottom, #eeeeee, #e0e0e0);
}

额外优化：用CSS变量统一维护渐变参数 #

为了方便调整和保持一致性，可使用CSS变量定义渐变的角度、颜色、条纹宽度：

:root {
  --stripe-angle: 45deg;
  --stripe-light: #f5f5f5;
  --stripe-dark: #eeeeee;
  --stripe-unit: 12px;
}

.experience-wrapper {
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-light),
    var(--stripe-light) var(--stripe-unit),
    var(--stripe-dark) var(--stripe-unit),
    var(--stripe-dark) calc(var(--stripe-unit) * 2)
  );
}

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