最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？（毕竟切图好讨厌的(≧▽≦)/）。就研究了一下实现方式。在此，给大家做一下参考。
设计参考图.png
Border的实现方式
大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。
1.首先我们先建一个div元素
<div class="container">
<div class="curve"></div>
</div>
2.给它一些基本样式
.container {
width: 500px;
height: 200px;
border: 1px solid black;
text-align: center;
box-shadow: 5px 5px 3px rgba(125, 125, 126, 0.7);
position: relative;
}
.curve {
position: absolute;
width: 250px;
height: 30px;
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 100%;
bottom: 0;
}
.curve:after {
content: "";
position: absolute;
width: 250px;
height: 30px;
border-top: 1px solid red;
border-left: 1px solid red;
border-top-left-radius: 100%;
left: 250px;
bottom: 30px;
}
最终效果：
border-curve.png
从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍两个更加常用的方法。
SVG方式
在搜索实现方案的过程中，发现一个好用的工具,可以用它来调试出复杂的曲线。根据设计稿的线条，很快就调试出来一个svg的路径参数。
<path d="M20,283 C208,288 282,195 472,201" />
接着，修饰一下该曲线，就能得到我们所需要的效果了。
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<path d="M20,283 C208,288 282,195 472,201" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
最终效果如图：
svg-curve-demo.png
在线尝试codepen
Canvas的实现方式
发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。
这里会用到贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考维基百科上的相关介绍。
1.创建一个canvas元素
<canvas id="myCanvas"></canvas>
2.利用bezierCurveTo这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个工具来获取所需要的具体参数数值。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = '500';
canvas.height = '400';
context.beginPath();
context.fillStyle = '#00000';
context.moveTo(64,288);
context.bezierCurveTo(208,286,257,201,420,200);
context.stroke();
//以下两行是画边框
context.fillStyle = "#ff0000";
context.strokeRect(0, 0, canvas.width, canvas.height);
至此，我们就得到了我们想要的曲线了。
canvas-curve-demo.png
参考资料
How to Draw Quadratic Curves on an HTML5 Canvas
在线SVG编辑器
MDN SVG Tutorial
