解决方法
基于SVG的方法：
CSS可能不是创建此类形状的最佳方式.你应该使用SVG.
1-使用路径元素：
我们可以使用SVG的path元素来创建这个形状,并用一些颜色,渐变或图案填充它.
只有一个属性d用于定义路径元素中的形状.此属性本身包含许多短命令和几个参数,这些命令是这些命令工作所必需的.
下面是创建此形状的必要代码：
<path d="M0,0 0,20
Q25,25 50,50
Q75,25 100,25
L100,0 Z" />
我在路径元素中使用了4个命令.以下是简要说明：
> M命令用于定义起点.它出现在开头,并指定绘图应从哪里开始.
> Q命令用于绘制曲线.
> L命令用于绘制直线.
> Z命令用于关闭当前路径.
工作实例：
svg {
width: 100%;
}
<svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none"> <path d="M0,20 Q25,50 Q75,25 L100,0 Z" fill="brown" /> </svg>
2-剪辑：
剪切意味着删除或隐藏元素的某些部分.
在这种方法中,我们使用SVG的clipPath元素定义剪切区域,并将其应用于矩形元素.将隐藏剪切区域之外的任何区域.
以下是必要的代码：
<defs>
<clipPath id="shape">
<path d="M0,20
Q25,50
Q75,25
L100,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/>
> defs元素用于定义元素/对象以供以后在SVG文档中使用.
> clipPath元素用于定义剪切区域.
> rect元素用于创建矩形.
> clip-path属性用于链接先前创建的剪切路径.
工作实例：
svg {
width: 100%;
}
<svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none"> <defs> <clipPath id="shape"> <path d="M0,0 Z" /> </clipPath> </defs> <rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/> </svg>
基于CSS的方法：
1-使用具有大箱阴影值的旋转伪元素：
>创建2< div>父元素内的元素.
>使用:: before或:: after伪元素绘制小高度和边界半径的叠加.
>使用CSS3 rotate()转换应用几度旋转.
>应用大的框阴影值并将其调整为最终形状.
输出图像：
工作实例：
.container {
position: relative;
overflow: hidden;
height: 80px;
}
.left,.right {
position: relative;
overflow: hidden;
height: 100%;
float: left;
width: 50%;
}
.right {
float: right;
}
.left:before,.right:before {
Box-shadow: 0 0 0 150px brown;
transform-origin: left bottom;
transform: rotate(-3deg);
border-radius: 100%;
position: absolute;
bottom: -70px;
height: 100px;
content: '';
width: 200%;
left: -10%;
}
.left:before {
transform-origin: right bottom;
transform: rotate(3deg);
right: -10%;
left: auto;
}
<div class="container"> <div class="left"></div> <div class="right"></div> </div>
有用的资源：
