DIV上半部椭圆布局问题？

这种布局
图片描述
自己试了下border-top-left/right-radius:50%，

但是差别很大，有没有什么好的纯html+css方案推荐？

css 布局

html5

阅读 6k

5 个回答

得票最新

EXDestroyer

844136374

发布于
2016-04-06

http://codepen.io/exdestroyer/pen/JXOVzL

timeswind

38113

发布于
2016-03-30

    border-top-left-radius: 300px 50px;
    border-top-right-radius: 300px 50px;

//設置兩個值可以達到橢圓圓角的效果

golden_freeman_china

1.8k1211

发布于
2016-03-30

更新于
2016-04-07

position:relative;
toop:10rem;
height:4rem;

就能基本形似了；

更新答案：希望PO主不是伸手党；

<html>
    <style>
        .bg{
            background:blue;
            width:320px;
            height:100%;
            min-height:100%;
            max-height:100%;
            overflow:hidden;
            box-sizing: border-box;
            padding-top:5rem;
            position: relative;
            overflow:hidden;
        }
        .bg .content{
            display: block;
            padding:4rem 1rem 0;
            position: relative;
            z-index:2;
        }
        .bg .decoration{
            height:640px;
            width:640px;
            position: absolute;
            left:-160px;
            background:white;
            border-radius:50%;
            z-index:1;
            box-sizing: border-box;
        }
        .bg .decoration:before{
            display: block;
            content:"";
            margin:5px;
            height:626px;
            width:626px;
            border-radius:50%;
            border:2px dashed blue;
        }
    </style>
    <body>
        <div class="bg">
            <div class="decoration">

            </div>
            <div class="content">
                这里是内容
            </div>
        </div>
    </body>
</html>