我想做这样的东西

我做了形状与剪辑路径和堆叠组件，我所取得的是这样的与此代码

<div className="relative w-full lg:h-[220px] 2xl:h-80">
                  <div className="absolute w-full lg:h-[220px] 2xl:h-80 bg-[#2f3030] mt-10 p-3 [clip-path:polygon(0_0,65%_0,71%_18%,100%_18%,100%_100%,0_100%)]"></div>

                  <div className="absolute w-full right-0 top-0 bg-[#ff0000] lg:h-[220px] mt-10 2xl:h-80 [clip-path:polygon(67%_0,100%_0,100%_15%,72%_15%)]"></div>
                </div>

但问题是，我如何使它圆润，并添加一些梯度边界像在第一个图像？