CSS3怎么画曲线？

CSS3怎么画曲线？

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

最终效果：

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

以上就是CSS3怎么画曲线？的详细内容，更多请关注0133技术站其它相关文章！