如何调整Div背景图使其与相邻Div背景图精准衔接？

我想要实现的效果如下：

即Div 1的蓝色三角形部分与Div 2的对应部分精准衔接，右侧三角形同理，且Div 2与Div 3（甚至更多后续区块）都要实现同样的衔接效果。

目前我尝试了两种方案，但均存在问题：

• 方案1：使用完整合并背景图
  用一张包含3个Div背景的完整图，配合background-size: cover和background-attachment: fixed属性
  问题：垂直滚动时内容布局会被破坏，比如文本、图片无法匹配当前显示的背景区域。
• 方案2：使用background-position定位
  给Div 1的背景图设置background-position: 50% 0px，给Div 2的背景图设置background-position: 50% -1200px
  问题：在不同屏幕尺寸下，区块间的衔接会失效，需要针对所有尺寸逐一调整，维护成本极高。

更新：我已经写了当前的代码示例，希望能基于此找到更优方案。

恳请各位提供可行的实现思路，谢谢！

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