42

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

5 回答 5

90

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

基于 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命令用于关闭当前路径。

输出图像：

底部弯曲的 div 元素

工作演示：

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>

基于 CSS 的方法：

1-使用伪元素：

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

  • 创建一个具有::beforeOR::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-径向渐变：

在这种方法中，我们将使用 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)x使用和指定的y控制点从当前笔位置到指定的点绘制一条cp1x曲线cp1y。
  • fill()使用非零或奇偶缠绕规则填充当前路径。

有用的资源：

于 2017-08-21T08:29:12.750 回答
44

CSS：

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

看看这适合你吗：DEMO

于 2013-06-11T09:35:29.650 回答
22

这就是你想要的：

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

与接受的答案不同，即使 div 的高度增加，这也有效。

演示：jsFiddle

于 2016-05-07T09:15:48.107 回答
3

是的，你可以在 CSS 中做到这一点 - 基本上让你的 div 比页面更宽以修复太圆的边缘，然后左定位来补偿，底部边框半径使用 x 和 y 值，负底部边距来补偿差距：

.round-bottom { 
  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;)
}


.round-bottom { 
  border-bottom-left-radius: 50% 150px !important;
  border-bottom-right-radius: 50% 150px !important;
  position: relative;
  overflow: hidden;
  width: 160%; 
  margin-bottom:-50px;
  left:-30%; 
  background-color:#444;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a2/Tropical_Forest_with_Monkeys_A10893.jpg'); background-position: center center;
  background-size: 42% auto;
  height:150px;
}
.container { width: 100%; height: height:100px; padding-bottom:50px; overflow:hidden;}
<div class="container"><div class="round-bottom"></div></div>

于 2018-06-01T07:31:24.677 回答
0

尝试这个

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

jsFiddle 文件

于 2013-06-11T09:42:16.993 回答