Html 使用两种颜色和s曲线制作页脚

我在页脚中绘制s曲线时遇到问题

任何人都可以帮我制作这样的页脚：

根据这一点，这可能是您的解决方案：

.footer{
高度：100px；
位置：相对位置；
溢出：隐藏；
背景颜色：绿色；
}
.内容{
位置：绝对位置；
最高：40%；
左：5px；
}
.页脚：之前，
.页脚：在{
内容：“；
垂直对齐：顶部；
显示：内联块；
变换原点：右上角；
变换：倾斜（-40度）；
}
.页脚：之前{
身高：100%；
宽度：50%；
边界半径：0 40px 0；
背景：浅灰色；
}
.页脚：在{
高度：40px；
宽度：40px；
左边距：-1px；
背景：径向梯度（右下角圆圈，透明68%，浅灰色70%）；
}

文本显示在这里

试试这个

：根目录{
--背景颜色：#12633a；
--fg颜色：#eaeaea；
--半径：80px；
}
.集装箱{
显示器：flex；
}
.左{
背景：var（--fg颜色）；
高度：250px；
柔性生长：1；
}
.对{
背景：var（--bg颜色）；
高度：250px；
柔性生长：1；
}
.夹子{
宽度：300px；
溢出：隐藏；
}
d{
显示器：flex；
背景：var（--fg颜色）；
证明内容：中心；
宽度：500px；
左边距：-100px；
}
.d1{
背景：var（--fg颜色）；
高度：250px；
宽度：250px；
边框右下半径：计算值（var（--半径））；
变换：斜X（-30度）；
}
.d2{
背景：var（--bg颜色）；
}
.d3{
背景：var（--bg颜色）；
高度：250px；
宽度：250px；
边框左上半径：var（--半径）；
变换：斜X（-30度）；
}

请分享到目前为止您尝试过的内容：伪元素、边框、渐变、SVG…？几乎相同：注意内联块元素之间的间距。好的像素，谢谢您，先生