Question

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

Answer 1

CSS：

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

看到这对你好：DEMO

Answer 2

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

基于SVG的方法：

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

1-使用路径元素：

我们可以使用SVG＆＃39; 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命令用于关闭当前路径。

输出图片：

工作演示：

＆＃13;

svg {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

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属性用于链接先前创建的剪切路径。

工作演示：

＆＃13;

svg {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

基于CSS的方法：

1-使用伪元素：

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

使用::before OR ::after伪元素创建一个宽度和高度超过其父元素的图层。
添加border-radius以创建圆角形状。
在父级上添加overflow: hidden以隐藏不必要的部分。

必填HTML：

我们需要的只是一个div元素，可能有一些像shape这样的类：

<div class="shape"></div>

工作演示：

＆＃13;

.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;
}

＆＃13;

<div class="shape"></div>

＆＃13;

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%);
}

工作演示：

＆＃13;

.shape {
  background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
  height: 80px;
}

＆＃13;

<div class="shape"></div>

＆＃13;

基于JavaScript的方法：

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

HTML5 Canvas：

我们可以使用路径函数在HTML5 Canvas元素上绘制这个形状：

＆＃13;

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();

＆＃13;

<canvas id="canvas" width="622" height="80"></canvas>

＆＃13;

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

beginPath()用于创建新路径。创建新路径后，将来的绘图命令将定向到路径中。
moveTo(x, y)将笔移动到x和y指定的坐标。
lineTo(x, y)从当前笔位置绘制一条直线到x和y指定的点。
quadraticCurveTo(cp1x, cp1y, x, y)使用x和y指定的控制点，从当前笔位置绘制到cp1x和cp1y指定点的曲线。
fill()使用非零或偶数绕组规则填充当前路径。

有用的资源：

径向渐变：Specs，MDN
SVG：Specs，MDN
HTML5 Canvas：Specs，MDN

Answer 3

这就是你想要的：

div{
    background-color: black;
    width: 500px;
    height: 200px;
    border-radius: 0 0 50% 50% / 15%;
}

jsFiddle demo

Answer 4

是的，您可以在CSS中执行此操作 - 基本上使您的div比页面更宽以修复过于圆润的边缘，然后左侧定位以进行补偿，使用x和amp; y值和负底差以弥补差距：

border-bottom-left-radius: 50% 200px; // across half & up 200px at left edge
border-bottom-right-radius: 50% 200px; // across half & up 200px at right edge
width: 160%; overflow: hidden; // make larger, hide side bits
margin-bottom: -50px; // apply negative margin to compensate for bottom gap
position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)

Answer 5

试试这个

.navbar{
    border-radius:50% 50% 0 0;
    -webkit-border-radius:50% 50% 0 0;
    background:#000;
    min-height:100px;
}

jsFiddle File

我可以创建一个曲线底部的div吗？

5 个答案:

基于SVG的方法：

基于CSS的方法：

基于JavaScript的方法：