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

页面代码如下：