如何使用CSS在两个渐变背景的div之间创建S形曲线？

嘿，看起来你已经想到SVG方向了！那我就把这个方案给你细化清楚，再额外加个纯CSS的备选方案，两种都能搞定这个S形分隔的需求：

方案一：SVG实现（曲线精准，适配性强） #

SVG是做这种自定义曲线分隔的最佳选择，不仅曲线精度高，而且能完美适配各种屏幕尺寸，还能和背景无缝融合。

先看完整的实现代码，直接替换你现有的代码就行：

<div id="section1"></div>
<!-- S形分隔的SVG -->
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
  <path d="M0,50 Q360,100 720,50 T1440,50" fill="#de350b" />
</svg>
<div id="section2"></div>

#section1{ 
  height:200px; 
  background: linear-gradient(to bottom right, #ad3, #add); 
} 
#section2{ 
  height:200px; 
  background: linear-gradient(to bottom right, #de350b, #0065ff); 
  margin-top: -1px; /* 消除SVG和div之间的细微间隙 */
}
svg {
  width: 100%;
  height: 50px; /* 控制曲线的高度，数值越大曲线起伏越明显 */
}

关键细节说明： #

• viewBox="0 0 1440 100"：定义SVG的画布范围，1440是适配宽屏的常见宽度，100是曲线的高度上限，方便后续调整
• d="M0,50 Q360,100 720,50 T1440,50"：这是绘制S形的核心路径指令：
  • M0,50：从画布左上角的(0,50)位置开始绘制
  • Q360,100 720,50：绘制一段二次贝塞尔曲线，控制点在(360,100)，终点落在画布中间(720,50)
  • T1440,50：自动生成对称的后半段曲线，轻松完成S形
• 把path的fill设为section2的渐变起始色，就能让分隔线和下方区块的背景无缝衔接；如果想要更自然的过渡效果，还可以给path添加渐变填充（你可以自行定义线性渐变并绑定到path的fill属性上）

方案二：纯CSS Clip-path实现（无需SVG，代码简洁） #

如果不想引入SVG，用CSS的clip-path属性也能模拟出近似的S形分隔，缺点是曲线的精准度不如SVG，但胜在代码简洁，现代浏览器都支持。

示例代码如下：

<div id="section1"></div>
<div id="section2"></div>

#section1{ 
  height:200px; 
  background: linear-gradient(to bottom right, #ad3, #add); 
  /* 用多边形裁剪出近似S形的底部边缘 */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
} 
#section2{ 
  height:200px; 
  background: linear-gradient(to bottom right, #de350b, #0065ff); 
  margin-top: -40px; /* 让两个div重叠，露出裁剪后的曲线边缘 */
}

调整技巧： #

• 你可以修改clip-path里的百分比数值来调整曲线的弧度和高度，比如把80%改成70%，曲线的起伏会更明显
• 负margin的数值要和clip-path里的高度差对应，确保两个区块的衔接自然

两种方案各有优劣，追求精准曲线选SVG，想快速实现选纯CSS～

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