如果是個人練習(xí)。上面大佬的方法已經(jīng)很清楚了。。。如果是實際開發(fā)，建議直接背景圖。。。等等，此處會有"大佬"告訴你這個方法性能差。。。嗯，沒錯性能比不上css。但是你用css寫，圓角的值你不知道吧?各個參數(shù)你不知道吧?ie8不能兼容吧? 差個幾像素也不美觀啊，基本上調(diào)半天。。。權(quán)衡一下性能和開發(fā)效率。而且等你后面有空了，再來用css也不遲

我目前有兩種思路：

1. 通過css border + 遮擋部分div實現(xiàn)，如

<style>
    #test {
        position: absolute;
        top: -20vh;
        left: -25vw;
        height: 40vh;
        width: 200vw;
        background: #393B57;
        border-radius: 100%;
    }
</style>
<div id ="test"></div>

1. 通過svg實現(xiàn)（更靈活，動畫效果更平滑）

參考例子1、例子2

有其他實現(xiàn)思路可補充。

   <div class="header">
            <div class="headerradius">

            </div>

        </div>

.header{
    position: relative;
    width: 100%;
    height:3rem;
    overflow: hidden;
}
.headerradius{
    width: 110%;
    left: -5%;
    position: absolute;
    height:3rem;
    background-color: #1F3149;
    border-top-left-radius:0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 200rem 50rem;
    border-bottom-left-radius: 200rem 50rem;
}

用的px2rem.js如下

// JavaScript Document
(function px2rem(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            /*
             * 100 -> html,body {  font-size:100px; }
             * 750 -> 此處以 iPhone6 兩倍設(shè)計稿 寬度750px 布局頁面
             * 根據(jù)具體情況改變這兩個數(shù)值
             */
        };
    if (!doc.addEventListener) return;
    // 窗口大小發(fā)生變化，初始化
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    //防止在html未加載完畢時執(zhí)行，保證獲取正確的頁寬
    setTimeout(function(){
        px2rem(doc, win);
    }, 200);
})(document, window);