html 直线变曲线,CSS3怎么画曲线？

CSS3怎么画曲线？下面本篇文章给大家介绍一下CSS3画曲线的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

CSS3怎么画曲线？

大家都知道，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;

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;

}

最终效果：

更多web前端知识，请查阅 HTML中文网 ！！