目标形状

分组@2x.png

原理

<div class="box-wrapper">
    <div class="arctop"></div>
</div>

.box-wrapper {
  position: absolute;//根据需求修改 我这里需要固定在底部
  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); //中轴线对齐 距离右边的距离为 半径减去一半的屏宽（宽度）
  }
}

87CAP%}5$@1_@{Z{UQ5_B(0.png