复刻参考UI：实现容器内曲线绘制及渐变色彩效果

实现思路 #

• 用SVG绘制与参考图匹配的自定义曲线，嵌入容器保证贴合效果
• 通过CSS渐变实现容器或曲线的色彩过渡效果
• 适配容器尺寸，避免曲线拉伸变形

完整代码示例 #

以下是HTML+CSS+SVG的实现方案，可直接复用调整：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带渐变曲线的容器UI</title>
    <style>
        /* 容器基础样式 */
        .container-card {
            width: 300px;
            height: 200px;
            position: relative;
            /* 容器背景渐变 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* 底部曲线定位 */
        .bottom-curve {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
        }

        /* 曲线填充样式 */
        .curve-path {
            fill: #ffffff;
            /* 如需曲线自身渐变，替换为下面的渐变引用 */
            /* fill: url(#curveGradient); */
        }
    </style>
</head>
<body>
    <div class="container-card">
        <!-- 自定义曲线SVG，可根据参考图调整path路径 -->
        <svg class="bottom-curve" viewBox="0 0 300 40" preserveAspectRatio="none">
            <!-- 可选：曲线自身渐变定义 -->
            <!-- <defs>
                <linearGradient id="curveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f5f5f5;stop-opacity:1" />
                </linearGradient>
            </defs> -->
            <path class="curve-path" d="M0,40 C60,20 240,10 300,40 L300,40 L0,40 Z" />
        </svg>
    </div>
</body>
</html>

关键细节说明 #

• 渐变效果：容器的linear-gradient可通过调整角度（如135deg）和色值（如#667eea、#764ba2）匹配需求；若要给曲线加渐变，启用注释中的<defs>代码块即可。
• 曲线匹配：SVG的path标签中，d属性的C命令是三次贝塞尔曲线，调整中间两个控制点的坐标（示例中60,20和240,10），就能精准匹配参考图的曲线形状。
• 尺寸适配：SVG设置preserveAspectRatio="none"确保曲线随容器宽度自动拉伸，修改容器尺寸时，同步调整SVG的viewBox宽度值即可。

调整建议 #

1. 若需要完全复刻参考图曲线，可使用Figma、在线SVG编辑器绘制曲线后，直接导出path的d值替换代码对应部分。
2. 渐变色彩可通过在线渐变工具生成色值，替换CSS中的渐变参数。
3. 容器的阴影、圆角等样式可根据现有UI调整对应CSS属性。

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