Css 将渐变应用于倾斜div

我使用了以下CSS制作了一个梯形的div，使用了带有角度边框的CSS技巧：

#slopedDiv{
位置：绝对位置；
身高：0；
宽度：100px；
边框样式：实心；
边框颜色：#DC0714透明；
边框宽度：248px 125px 0；
}

---

一个选项可以是对伪元素使用

skew（）

，而不是像这样的边界技巧：

#slopedDiv{
宽度：200px；
溢出：隐藏；
}
#斯洛佩迪夫：以前{
内容：“；
显示：块；
高度：100px；
背景：线性梯度（向右，rgba（11,11,87,1）0%，rgba（150,66,87,1）100%）；
变换：倾斜（-25度）translateX（-50像素）
}

---

有一种方法可以进行边界图像渐变，如下所示：

---

但是，根据我的测试，如果高度为0，这将不起作用。您仅限于使用伪类来实现这一点，我认为您无法在0高度的div上严格使用带边框的渐变+梯形。

如果div后面的背景颜色已知，您可以在元素的背景上使用2个渐变来实现这一结果。一个是可以看到的渐变，另一个是隐藏它的对角线渐变（在本例中为白色）

.test{
宽度：400px；
高度：300px；
背景图像：线性渐变（-71度，白色100px，透明100px），线性渐变（底部，绿色，黄色，蓝色）；
}

---

我喜欢这一个，希望有人能找到解决办法！不值得回答，但为了好玩：渐变+混合模式在哪里工作。。。我喜欢这个-很棒的工作！Thx@Nickythe扳手：）虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@BlueFox我尝试了几种不同的方法来在线添加重要的部分，但是没有一种方法能与他的应用程序一起工作，所以我只留下了其他信息以及他这种方法不起作用的原因。链接没有回答这个问题。它提供了一种不同的选择。