css - DIV上半部椭圆布局问题？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - DIV上半部椭圆布局问题？

伊谢尔伦 2017-04-17 13:07:04

[HTML讨论组]

598

这种布局

自己试了下border-top-left/right-radius:50%，

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

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(5)

怪我咯2017-04-17 13:09:04 5楼

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

赞 +0

添加回复

怪我咯2017-04-17 13:09:04 4楼

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

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

赞 +0

添加回复

PHPz2017-04-17 13:09:04 3楼

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>
        <p class="bg">
            <p class="decoration">

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

赞 +0

添加回复