css画圆弧

Posted 2022-09-20 piaoyu

有时候，在编写公众号，或者微信小程序，或者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>