第二十七天：不规则边缘

金鱼都能懂的网页切版：21

不规则边缘

https://codepen.io/mikeyam/pen/rNLVmKq?editors=1100

HTML排版部分，规划为上方图片，下方为文字排版

<div class="banner"></div>
<div class="content"></div>

banner，放上一张图片

.banner{
    height: 700px;
    background: url('https://images.unsplash.com/photo-1601974959109-a1217f73728c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80') center top / cover;
}

设定外层宽度

.content .container{
    width: 1200px;
    display: flex;
    margin: auto;
    padding: 100px 0;
    z-index: 2;
    position: relative;
}

文字内容设定

.content .box{
    width: 570px;
    margin: 0 15px;
}
.content .box p{
    line-height: 1.7;
    margin-bottom: 1.6em;
}
.content .box h2{
    margin-bottom: 1.3em;
}
.content{
    position: relative;
}

在文字这层的class(.content)使用伪元素，向上做出box-shadow，因此可以知道不规则图形适用box-shadow一层层推叠出来

.content::after{
    content: '';
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #fff;
    top: 0;
    left: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
box-shadow: 178px 0 0 30px #fff,
                    327px 34px 0 20px #fff,
                    480px 9px 0 60px #fff,
                    690px 71px 0 60px #fff,
                    880px 0 0 89px #fff,

                    -178px 0 0 30px #fff,
                    -327px 34px 0 20px #fff,
                    -480px 9px 0 60px #fff,
                    -690px 71px 0 60px #fff,
                    -880px 0 0 89px #fff,
                    -1100px 50px 0 89px #fff,

                    100px 0px 0 56px rgba(0,0,10,.5),
                    298px 10px 0 56px rgba(0,0,10,.5),
                    540px -40px 0 50px rgba(0,0,10,.5),
                    740px -30px 0 30px rgba(0,0,10,.5),
                    880px -100px 0 80px rgba(0,0,10,.5),
                    1000px 0px 0 80px rgba(0,0,10,.5),

                    -60px 0px 0 56px rgba(0,0,10,.5),
                    -298px 10px 0 56px rgba(0,0,10,.5),
                    -540px -40px 0 50px rgba(0,0,10,.5),
                    -740px -30px 0 30px rgba(0,0,10,.5),
                    -780px -70px 0 80px rgba(0,0,10,.5),
                    -1200px 0px 0 80px rgba(0,0,10,.5);
}

在次使用伪元素把多出来地方做覆盖

.content::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 200px;
    z-index: 1;
    background: #fff;
    top: 0;
    left: 0;
}