微信小程序如何实现弧形红包壳效果

1、首先新建个Page类之后，在wxml里面放置底层背景视图，wxss里使用flex弹性布局，并设置好颜色，如下：

2、在背景里面实现一个带圆角的白色矩形框，使用flex弹性布局方便子视图约束，位置放置于界面底层容器的正中间，根据自己的标注图设置好相应大小和背景，如下：

3、在白色背景里面放置一个圆形视图，设置好合适的背景颜色，如下：

4、调整红色圆形视图的margin-top属性为负值（采用rpx进行适配），将其往上移动，如下：

5、设置白色视图的

overflow: hidden;

将超过白色区域的红色区域剪切掉（overflow表示溢出），如下：

6、然后根据标注图的标注调整红色区域的显示范围，适当调整红色区域的width、height和margin-top，如下：

7、最终实现代码如下：

wxml实现：

<view class='view-container-bg'>

<view class='view-bg-white'>

<view class='view-bg-arc'>

</view>

</view>

</view>

wxss实现：

.view-container-bg {

background-color: #20C6B7;

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.view-bg-white {

background-color: white;

width: 600rpx;

height: 800rpx;

border-radius: 10rpx;

display: flex;

flex-direction: column;

align-items: center;

overflow: hidden;

}

.view-bg-arc {

background-color: red;

width: 660rpx;

height: 660rpx;

border-radius: 330rpx;

margin-top: -350rpx;

}