Html 通过响应性强的css向上/向下绘制交叉背景

如何在单个部分（div）中通过css绘制这样的形状

目前我使用了三个div检查我的代码：）

这个想法很简单，从顶部开始，从水平中间开始，橙色首先需要以45度下降到下一个100px，然后剩余部分应以180度下降

对于底部，从水平中间开始，橙色首先需要以45度下降到下一个100px，然后剩余部分应以180度下降

所有这些都需要为单个容器/节/分区完成

.grad{
高度：100px；
宽度：100%；
背景：线性梯度（45度，白色50%，#f3ab2a 0），
线性梯度（蓝色20%，黑色0）；
}
博士学位1{
高度：100px；
宽度：100%；
背景：线性梯度（-130度，#f3ab2a 0%，#f3ab2a 0），
线性梯度（蓝色20%，黑色0）；
}
博士学位2{
高度：100px；
宽度：100%；
背景：线性梯度（45度，#f3ab2a 50%，白色50%）}

与之类似，您需要添加顶部并调整几个值：

.header{
高度：400px；
背景：
/*顶部*/
线性渐变（至左下角，透明49%，橙色50.5%），上中心/100px 100px，
线性梯度（橙色，橙色）左上角/计算（50%-49px）100px，
/*中部*/
线性梯度（橙色，橙色）中心/100%钙（100%-200px），
/*底部与顶部相似*/
线性渐变（至右上角，透明49%，橙色50.5%），底部中心/100px 100px，
线性梯度（橙色，橙色）右下角/计算（50%-49px）100px；
背景重复：无重复；
}

您真是一位专家，非常感谢，请指导我对其有一个好的概念。请把它清给我understandable@NimeshDeo我添加了更多细节；）我们可以在顶部添加黑色而不是透明色吗？和透明区域底部的灰色？：）@当然，只需添加更多渐变；）你能给我一个指南或教程来理解线性渐变来创建我想要的东西吗？：）使用CSS伪-elements@Varuna你能给我举个例子吗