我可以创建一个带有弧形底部的 div 吗？

所以我在一个网站上工作，我想知道是否有可能纯粹使用 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>

原文由 ShiftyF97 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 551

可以采用不同的方法来创建此形状。以下是可能性的详细描述：

基于 SVG 的方法：

SVG 是创建此类形状的推荐方法。它提供了简单性和可扩展性。以下是几种可能的方法：

1- 使用路径元素：

我们可以使用 SVG 的 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)" />

以下是上述代码中使用的元素的简要说明：

defs 元素用于定义元素/对象，供以后在 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>

基于 CSS 的方法：

1- 使用伪元素：

我们可以使用 ::before 或 ::after 伪元素来创建这个形状。创建它的步骤如下：

使用 ::before 或 ::after 宽度和高度大于其父级的伪元素创建层。
添加 border-radius 以创建圆形。
添加 overflow: hidden 在 parent 上以隐藏不需要的部分。

所需的 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-径向渐变：

在这种方法中，我们将使用 CSS3 的 radial-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>

基于 JavaScript 的方法：

虽然在这种情况下不是必需的，但为了完整起见，我也添加了这种方法。这在某些情况下也很有用：

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 和 y 指定的坐标。
lineTo(x, y) 从当前笔位置到 x 和 y 指定的点绘制一条直线。
quadraticCurveTo(cp1x, cp1y, x, y) draws a curve from current pen position to the point specified by x and y using control point specified by cp1x and cp1y 。
fill() 使用非零或奇偶缠绕规则填充当前路径。

有用的资源：

径向渐变：规范， MDN
SVG：规范， MDN
HTML5 Canvas：规范， MDN

原文由 Mohammad Usman 发布，翻译遵循 CC BY-SA 3.0 许可协议

我可以创建一个带有弧形底部的 div 吗？

基于 SVG 的方法：

基于 CSS 的方法：

基于 JavaScript 的方法：

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译