css怎么实现这个弧度？

Question

Answer 1

我目前有两种思路：

1. 通过css border + 遮挡部分div实现，如

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

1. 通过svg实现（更灵活，动画效果更平滑）

参考例子1、例子2

有其他实现思路可补充。

Answer 2

   <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 两倍设计稿 宽度750px 布局页面
             * 根据具体情况改变这两个数值
             */
        };
    if (!doc.addEventListener) return;
    // 窗口大小发生变化，初始化
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    //防止在html未加载完毕时执行，保证获取正确的页宽
    setTimeout(function(){
        px2rem(doc, win);
    }, 200);
})(document, window);

Answer 3

如果是个人练习。上面大佬的方法已经很清楚了。。。如果是实际开发，建议直接背景图。。。等等，此处会有"大佬"告诉你这个方法性能差。。。嗯，没错性能比不上css。但是你用css写，圆角的值你不知道吧?各个参数你不知道吧?ie8不能兼容吧? 差个几像素也不美观啊，基本上调半天。。。权衡一下性能和开发效率。而且等你后面有空了，再来用css也不迟