求助：如何调整CSS/SVG自定义形状以匹配目标效果

调整后的实现代码 #

针对你要实现的形状效果，替换现有代码即可：

CSS 部分

.custom-shape {
  position: absolute;
  top: 61px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape svg {
  width: 100%;
  height: 80px;
  border-radius: 8px 8px 0 0;
}

.custom-shape .shape-fill {
  fill: #6CC57C;
}

.shape-fill-light {
  fill: rgba(108, 197, 124, 0.5);
}

HTML 部分

<div class="custom-shape">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" preserveAspectRatio="none">
    <!-- 深绿色底层路径 -->
    <path d="M0,80C180,60,360,20,600,20S1020,60,1200,80V0H0V80Z" class="shape-fill"></path>
    <!-- 浅绿色上层路径 -->
    <path d="M100,80C280,60,460,25,600,25S920,60,1100,80V10H100V80Z" class="shape-fill-light"></path>
  </svg>
</div>

关键修改说明 #

• 移除无意义的rotate(360deg)和scaleY(-1)，避免形状反转或无效变换
• 调整SVG的viewBox和路径d属性，让两层路径呈现目标的内凹弧形，浅绿色路径更窄、顶部稍低，形成层次感
• 将border-radius应用在SVG元素上，实现顶部圆角效果
• 简化容器布局，去掉不必要的flex属性，让SVG占满容器宽度

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