Html 在div（顶部和底部）上创建倾斜渐变

我试图对div应用一个渐变，应该是这样的：

我已经设法弄清楚如何在顶部倾斜，但不确定如何在底部实现倾斜

当前方法：

.gradient{
背景：线性梯度（188度，#FFFFFF 24%，透明24%），线性梯度（90度，#45450%，#45100%）；
}
.差距{
高度：600px；
}

---

您可以使用剪辑路径来实现这一点

像这样的

剪辑路径：多边形（0,100%22%，100%99%，0,74%）

---

这里有一个网站可以帮助您找到正确的路径：

选项1

HTML-

CSS-

.集装箱{
宽度：150px；
高度：100px；
变换：歪斜（20度）；
背景#4545；
}

选项2（推荐）

HTML-

CSS-

.集装箱{
宽度：150px；
高度：100px；
剪辑路径：多边形（0,100%25%，100%100%，0,75%）；
背景#4545；
}

两个结果都是-

---

将你的形状分成3部分。两个三角形和一个矩形：

.box{
宽度：300px；
高度：300px；
背景：/*位置/宽度/高度*/
线性渐变（至右上角，灰色50%，透明50.5%）顶部/100%30%，
线性梯度（灰色、灰色）中心/100%40%，
线性渐变（至左下角，灰色50%，透明50.5%）底部/100%30%；
背景重复：无重复；
}

---

为gap提供背景色，并使用css的变换属性，旋转或扭曲最适合您的图案