web 前端绘制折线_如何用HTML5技术画一条二维曲线

最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？(毕竟切图好讨厌的(≧▽≦)/)。就研究了一下实现方式。在此，给大家做一下参考。

设计参考图.png

Border的实现方式

大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。

1.首先我们先建一个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;<