我可以创建一个曲线底部的div吗？
Shi*_*F97 24 html css html5 css3 css-shapes
所以我正在网站上工作,我想知道是否可以,纯粹使用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>
Moh*_*man 31
可以采用不同的方法来创建这种形状.以下是可能性的详细说明:
基于SVG的方法:
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命令用于绘制曲线.Zcommand用于关闭当前路径.
输出图像:
工作演示:
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文档中使用.clipPathelement用于定义剪切区域.rectelement用于创建矩形.clip-pathattribute用于链接先前创建的剪切路径.
工作演示:
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()使用非零或偶数绕组规则填充当前路径.
有用的资源:
- 同意，这个答案让我希望我能不止一次投票 (3认同)
Ara*_*790 28
CSS:
div{
background-color:black;
width:500px;
height:50px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
看,这对你好吗:DEMO
man*_*h_s 10
这就是你想要的:
div{
background-color: black;
width: 500px;
height: 300px;
border-radius: 0 0 50% 50% / 50px;
}