带边框顶部的线性渐变

Question

我正在使用CSS创建一个tarpezoid形状。我希望梯形的颜色慢慢消失。我使用以下CSS创建了梯形：

 $(".trapezoid-wrapper").css("border-top",'200px solid rgba('+finalRgb[0]+','+finalRgb[1]+','+finalRgb[2]+','+ 0.05 + ')');
 $(".trapezoid-wrapper").css("border-left", left + 'px solid transparent');
 $(".trapezoid-wrapper").css("border-right", left + 'px solid transparent');

梯形包装上的一些静态CSS：

.trapezoid-wrapper {
height: 495px; 
width: 535px;
bottom:-7px; 
position: absolute;

}

到目前为止我得到的是：https://ibb.co/f83Pi7

当我们向上移动时，我希望梯形颜色慢慢消失。有人可以帮忙吗？我尝试使用线性渐变，但效果不佳。