Html 如何使水平分割为两部分的线性渐变背景圆化？

我有一个很大的背景部分：

背景：线性梯度（180度，#fff 20%，#98DB43 20%）我正在尝试环绕底部部分的左上角和右上角（使用#98DB43颜色）
 > P>可以考虑径向梯度来模拟圆角


.box{
高度：200px；
宽度：200px；
背景：
径向梯度（右下角最远一侧，100%透明，#fff 100%）
左0顶部计算（20%+0.2*40px）/*背景位置*/
/40px 40px，/*背景尺寸*/
径向梯度（左下角最远一侧，100%透明，#fff 100%）
右0顶部计算（20%+0.2*40px）/*背景位置*/
/40px 40px，/*背景尺寸*/
线性梯度（180度，#fff 20%，#98DB43 20%）；
背景重复：无重复；
边框：1px实心；
}