摘要：
有时候，在写公众号、微信小程序或webapp时，需要一些特效，比如arc，其实原理很简单。只需在外面写一个方框来容纳红色部分。红色部分设置为比框宽，然后调整红色圆弧和位置以直接编码。框｛100%；背景色：#5e5858；高度：500px；文本对齐：居中；｝弧形框｛300px；高度：300px；边距：0pxauto；溢出：隐藏；｝。arcbottom｛200%；位置：相对；高度：300px；背景色：#bd0808；边框左下半径：350px；边框右下半径：350 px；左侧：-150px；｝页面代码如下：
有时候，在编写公众号，或者微信小程序，或者webapp的时候，需要一些比较特殊的效果，如圆弧。
效果图如下：
上图中的红色部分。
其实原理很简单，只要在外部写一个box装住红色的部分，红色部分设置宽度比box宽度的大，然后调整红色的圆弧和位置就可以了
直接上代码
.box{
100%;
background-color: #5e5858;
height: 500px;
text-align: center;
}
.arcbox{
300px;
height: 300px;
margin: 0px auto;
overflow: hidden;
}
.arcbottom{
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>