Html 如何使用线性渐变制作成型背景？

如何使用线性渐变制作侧斜角背景？

html:

---

谢谢你的帮助

可以使用多个渐变：

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size

.box{
宽度：300px；
高度：300px；
背景：线性梯度（至右下角，红色49%，透明51%）0 0/30px 100%无重复，
线性梯度（左上角，红色49%，透明51%）100%100%/50px 200%无重复，
#埃德德；
}

试试这个

。路标{
宽度：100wh；
高度：100vh；
背景：线性渐变（至右下角，红色40%，透明44%）0 0/50px 100%无重复，
线性渐变（左上角，红色40%，透明44%）100%100%/70px 200%无重复，
#埃德德；
}

---

使用一个渐变的想法：

。路标{
显示：表格；
宽度：100%；
高度：100vh；
}
.路标{
显示：表格单元格；
宽度：33.33%；
身高：100%；
}
.bg灰色{
背景：线性梯度（至右下角，红色44%，红色55.1%，红色55.1%）中心/100vw 1000vw；
}
身体{
保证金：0；
}

.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size