Draw an arc css

Sometimes, in the preparation of the public number, or micro-channel applets, or webapp, you need some special effects, such as arcs.

The effect is as follows:

The red part of the image above.

In fact, the principle is very simple, just write in a box mounted outside the red part live, part of the set width than the width of a large red box, and then adjust the position of the red arc on it

Directly on the code

.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;

 }

Page code is as follows:

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