Html 我可以创建一个底部弯曲的 div 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17040709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I create a div with a Curved bottom?
提问by ShiftyF97
So I'm working on a site and I was wondering if it's possible to, purely using HTML5, CSS3 (and JavaScript if needed), make a div with a curved bottom, so it will look practically like this:
所以我在一个网站上工作，我想知道是否有可能纯粹使用 HTML5、CSS3（如果需要，还有 JavaScript），制作一个底部弯曲的 div，所以它实际上看起来像这样：
Or can this only be done using a background image?
或者这只能使用背景图像来完成？
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
采纳答案by Aravind30790
回答by Mohammad Usman
There are different approaches that can be adopted to create this shape. Below is a detailed description of possibilities:
可以采用不同的方法来创建这种形状。以下是可能性的详细描述：
SVG Based Approaches:
基于 SVG 的方法：
SVGis the recommended way to create such shapes. It offers simplicity and scale-ability. Below are a couple of possible ways:
SVG是创建此类形状的推荐方法。它提供了简单性和可扩展性。以下是几种可能的方法：
1- Using Path Element:
1- 使用路径元素：
We can use SVG's pathelement to create this shape and fill it with some solid color, gradient or a pattern.
我们可以使用SVG的path元素来创建这个形状并用一些纯色、渐变或图案填充它。
Only one attribute dis used to define shapes in pathelement. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.
只有一个属性d用于定义path元素中的形状。此属性本身包含许多短命令和这些命令工作所需的几个参数。
Below is the necessary code to create this shape:
下面是创建这个形状的必要代码：
<path d="M 0,0
L 0,40
Q 250,80 500,40
L 500,0
Z" />
Below is a brief description of pathcommands used in above code:
以下是path上述代码中使用的命令的简要说明：
Mcommand is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.Lcommand is used to draw straight lines.Qcommand is used to draw curves.Zcommand is used to close the current path.
M命令用于定义起点。它出现在开头并指定绘图开始的点。L命令用于绘制直线。Q命令用于绘制曲线。Z命令用于关闭当前路径。
Output Image:
输出图像：
Working Demo:
工作演示：
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- Clipping:
2-剪辑：
Clipping means removing or hiding some parts of an element.
裁剪意味着删除或隐藏元素的某些部分。
In this approach, we define a clipping region by using SVG's clipPathelement and apply this to a rectangular element. Any area that is outside the clipping region will be hidden.
在这种方法中，我们通过使用 SVG 的clipPath元素定义一个剪切区域并将其应用于矩形元素。剪切区域之外的任何区域都将被隐藏。
Below is the necessary code:
下面是必要的代码：
<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)" />
Below is brief description of the elements used in above code:
以下是对上述代码中使用的元素的简要说明：
defselement is used to define element / objects for later use in SVG document.clipPathelement is used to define a clipping region.rectelement is used to create rectangles.clip-pathattribute is used to link the clipping path created earlier.
defselement 用于定义元素/对象以供以后在 SVG 文档中使用。clipPathelement 用于定义剪切区域。rectelement 用于创建矩形。clip-path属性用于链接之前创建的剪切路径。
Working Demo:
工作演示：
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 Based Approaches:
基于 CSS 的方法：
1- Using Pseudo Element:
1- 使用伪元素：
We can use ::beforeor ::afterpseudo element to create this shape. Steps to create this are given below:
我们可以使用::before或::after伪元素来创建这个形状。下面给出了创建它的步骤：
- Create a layer with
::beforeOR::afterpseudo element having width and height more than its parent. - Add
border-radiusto create the rounded shape. - Add
overflow: hiddenon parent to hide the unnecessary part.
- 使用
::beforeOR::after伪元素创建一个层，其宽度和高度大于其父元素。 - 添加
border-radius以创建圆形。 - 添加
overflow: hidden父级以隐藏不需要的部分。
Required HTML:
所需的 HTML：
All we need is a single divelement possibly having some class like shape:
我们所需要的只是一个div可能具有以下类的单个元素shape：
<div class="shape"></div>
Working Demo:
工作演示：
.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- Radial Gradient:
2-径向渐变：
In this approach we will use CSS3's radial-gradient()function to draw this shape on the element as a background. However, this approach doesn't produce very sharp image and it might have some jagged corners.
在这种方法中，我们将使用 CSS3 的radial-gradient()函数在元素上绘制此形状作为背景。但是，这种方法不会产生非常清晰的图像，并且可能会有一些锯齿状的角落。
Required HTML:
所需的 HTML：
Only single divelement with some class will be required i.e.
只div需要具有某个类的单个元素，即
<div class="shape"></div>
Necessary CSS:
必要的CSS：
.shape {
background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}
Working Demo:
工作演示：
.shape {
background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
height: 80px;
}<div class="shape"></div>JavaScript Based Approaches:
基于 JavaScript 的方法：
Although not required in this case but for the sake of completeness, I'm adding this approach as well. This can be useful in some cases as well:
虽然在这种情况下不是必需的，但为了完整起见，我也添加了这种方法。这在某些情况下也很有用：
HTML5 Canvas:
HTML5 画布：
We can draw this shape on HTML5 Canvas element using path functions:
我们可以使用路径函数在 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>Below is a brief description of the methods used in above code:
以下是对上述代码中使用的方法的简要说明：
beginPath()is used to create a new path. Once a new path is created, future drawing commands are directed into the path.moveTo(x, y)moves the pen to the coordinates specified byxandy.lineTo(x, y)draws a straight line from the current pen position to the point specified byxandy.quadraticCurveTo(cp1x, cp1y, x, y)draws a curve from current pen position to the point specified byxandyusing control point specified bycp1xandcp1y.fill()fills the current path using non-zero or even-odd winding rule.
beginPath()用于创建新路径。一旦创建了新路径，以后的绘图命令就会被定向到该路径中。moveTo(x, y)将笔移动到由x和指定的坐标y。lineTo(x, y)从当前画笔位置到由x和指定的点绘制一条直线y。quadraticCurveTo(cp1x, cp1y, x, y)绘制一条从当前笔位置的点的曲线通过指定x和y使用由指定的控制点cp1x和cp1y。fill()使用非零或奇偶缠绕规则填充当前路径。
Useful Resources:
有用的资源：
回答by manish_s
回答by Vision Hive
Yes, you can do this in CSS - basically make your div wider than the page to fix the too-rounded edges, then left-positioned to compensate, with bottom border radius using both x & y values, and negative bottom margin to compensate for the gap:
是的，你可以在 CSS 中做到这一点 - 基本上让你的 div 比页面更宽以修复太圆的边缘，然后左定位来补偿，使用 x 和 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;)
回答by Roy Sonasish
Try this
尝试这个
.navbar{
border-radius:50% 50% 0 0;
-webkit-border-radius:50% 50% 0 0;
background:#000;
min-height:100px;
}
