Html 线性渐变不适用于div

我正在使用以下CSS创建梯形：

。梯形{
边框底部：100px纯红；
左边框：50px实心透明；
右边框：50px实心透明；
身高：0；
宽度：100px；
背景：线性梯度（红色、黄色）；
}

---

您不能以这种方式应用渐变，因为您使用的是边框，并且元素的高度为0，所以背景不可见

相反，您可以尝试使用多重渐变来创建形状：

。梯形{
高度：100px；
宽度：200px；
背景：
线性渐变（至左下角，白色50%，透明52%）100%0/40px 100%无重复，
线性渐变（至右下角，白色50%，透明52%）0 0/40px 100%无重复，
线性梯度（红色、黄色）；
}

---

或在适当大小的元素（或伪元素）上使用转换

。梯形{
宽度：100px；
高度：100px；
保证金：自动；
变换：透视（100px）旋转（40度）；
背景：线性梯度（红色、黄色）；
}

---

因为高度是0，所以它不起作用。而且你不能有渐变边框。有人能建议一些改动最小的解决方法吗？嗨，你能解释一下你的代码吗？关于形成梯形的属性是什么？@user3681970我使用了3个渐变，主渐变和2个白色来隐藏不需要的部分，然后简单地调整值以查看；）我还添加了另一个解决方案：非常简单和优雅的解决方案！工作得很有魅力