css怎么实现这个弧度?

chris_Evans
  • 330

clipboard.png

回复
阅读 4.1k
3 个回答

我目前有两种思路:

  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

有其他实现思路可补充。

   <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);
小哈
  • 214

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

宣传栏