css实现圆弧背景图效果

<view class="head">
	<img src="../../static/my_head.png" alt="">
	<view class="user_name">用户昵称</view>
	<view class="user_number">181****7086</view>
</view>

.head{
	position: relative;
	width: 100%;
	height:550upx;
	text-align: center;
	z-index:2;
	img{
		width:140upx;
		height: 140upx;
		margin-top:130upx;
	}
	.user_name{
		font-size:36upx;
		font-weight: 600;
		color:#ffffff;
		margin-top:16upx;
		
	}
	.user_number{
		font-size:24upx;
		margin-top:20upx;
		color:#ffffff;
	}
}
.head:after{
	width: 140%;
	height: 550upx;
	position: absolute;
	left: -20%;
	top: 0;
	z-index: -1;
	content: '';
	border-radius: 0 0 50% 50%;
	background: #fd6954;
}

实现效果如图：