所以我正在开发一个网站，我想知道是否可以纯粹使用 HTML5、CSS3（如果需要的话还可以使用 JavaScript）制作一个底部弯曲的 div，所以它实际上看起来像这样：
或者只能使用背景图像来完成？
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
可以采用不同的方法来创建这种形状。以下是可能性的详细描述：
SVG是创建此类形状的推荐方法。它提供了简单性和可扩展性。以下是几种可能的方法：
1-使用路径元素：
我们可以用SVG's path元素来创建此形状并用一些纯色、渐变或图案填充它。
只有一个属性d用于定义形状path元素。该属性本身包含许多短命令和这些命令工作所需的一些参数。
以下是创建此形状所需的代码：
<path d="M 0,0
L 0,40
Q 250,80 500,40
L 500,0
Z" />
下面简单描述一下path上面代码中使用的命令：
M命令用于定义起点。它出现在开头并指定绘图的开始点。L命令用于绘制直线。Q命令用于绘制曲线。Z命令用于关闭当前路径。输出图像：
工作演示：
svg {
width: 100%;
}<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>2- 剪辑：
剪裁意味着删除或隐藏元素的某些部分。
在这种方法中，我们使用 SVG 定义剪切区域clipPath元素并将其应用于矩形元素。剪切区域之外的任何区域都将被隐藏。
下面是必要的代码：
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
以下是上述代码中使用的元素的简要说明：
defselement 用于定义元素/对象以供稍后在 SVG 文档中使用。clipPath元素用于定义剪切区域。rect元素用于创建矩形。clip-path属性用于链接之前创建的剪切路径。工作演示：
svg {
width: 100%;
}<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>1-使用伪元素：
我们可以用::before or ::after伪元素来创建这个形状。创建它的步骤如下：
::before OR ::after伪元素的宽度和高度大于其父元素。border-radius创建圆形形状。overflow: hidden父级隐藏不必要的部分。所需的 HTML：
我们所需要的只是一个div元素可能有一些类似的类shape:
<div class="shape"></div>
工作演示：
.shape {
position: relative;
overflow: hidden;
height: 80px;
}
.shape::before {
border-radius: 100%;
position: absolute;
background: black;
right: -200px;
left: -200px;
top: -200px;
content: '';
bottom: 0;
}<div class="shape"></div>2-径向渐变：
在这种方法中，我们将使用 CSS3radial-gradient()函数在元素上绘制此形状作为背景。然而，这种方法不会产生非常清晰的图像，并且可能有一些锯齿状的角落。
所需的 HTML：
仅有单身div需要具有某个类的元素，即
<div class="shape"></div>
必要的CSS：
.shape {
background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}
工作演示：
.shape {
background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
height: 80px;
}<div class="shape"></div>虽然在本例中不需要，但为了完整性，我也添加了这种方法。这在某些情况下也很有用：
HTML5 画布：
我们可以使用路径函数在 HTML5 Canvas 元素上绘制这个形状：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();<canvas id="canvas" width="622" height="80"></canvas>下面简单介绍一下上面代码中使用的方法：
beginPath()用于创建新路径。创建新路径后，将来的绘图命令将定向到该路径中。moveTo(x, y)将笔移动到指定的坐标x and y.lineTo(x, y)从当前笔位置到由 指定的点绘制一条直线x and y.quadraticCurveTo(cp1x, cp1y, x, y)从当前笔位置到指定点绘制一条曲线x and y使用指定的控制点cp1x and cp1y.fill()使用非零或奇偶缠绕规则填充电流路径。有用的资源：