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>