Happy New Year!

css画圆弧

有时候,在编写公众号,或者微信小程序,或者webapp的时候,需要一些比较特殊的效果,如圆弧。

效果图如下:

上图中的红色部分。

其实原理很简单,只要在外部写一个box装住红色的部分,红色部分设置宽度比box宽度的大,然后调整红色的圆弧和位置就可以了

直接上代码

复制代码
.box{
     width:100%;
     background-color: #5e5858;
     height: 500px;
     text-align: center;
 }
 .arcbox{
    width: 300px;
    height: 300px;
    margin: 0px auto;
    overflow: hidden;
 }

 .arcbottom{
     width: 200%;
     position: relative;
     height: 300px;
     background-color: #bd0808;
     border-bottom-left-radius: 350px;
     border-bottom-right-radius: 350px;
     left: -150px;

 }
复制代码

页面代码如下:

 <div class="box">
      <div class="arcbox">
        <div class="arcbottom"></div>          
      </div>
    </div>

 

posted @ 2021-01-13 14:47  义美-小义  阅读(537)  评论(0编辑  收藏  举报
返回顶部小火箭
世界很公平,想要最好,就一定得付出!
x
博客主页