目標(biāo)形狀
分組@2x.png
原理
<div class="box-wrapper">
<div class="arctop"></div>
</div>
.box-wrapper {
position: absolute;//根據(jù)需求修改 我這里需要固定在底部
left: 0;
bottom: 0;
width: 100%;
height: 120px; //圖形高度
overflow hidden;//超出隱藏
// 背景
.arctop{
position: relative;
// 圓直徑
width: 510px; //圓形半徑
height: 510px;
background-color: #fff;
border-radius 50%
right: calc(510px/2 - 50vw); //中軸線對(duì)齊 距離右邊的距離為 半徑減去一半的屏寬(寬度)
}
}
87CAP%}5$@1_@{Z{UQ5_B(0.png