基础知识:
border-radius:为元素添加圆角边框。
border-radius:10px 20px 30px 40px / 40px 30px 20px 10px
“/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径。
实例:
分析:
如上图设计稿,红框是我们需要画的弧线部分,蓝线为垂直半径,黄线为水平半径
假设盒子宽为750rpx,高度为70rpx。
则代码如下
border-radius: 0 0 375rpx 375rpx/0 0 70rpx 70rpx;
还可以使用伪类添加在正常盒子底部
&::after{
width: 100%;
height: 70rpx;
position: absolute;
left: 0%;
top: 100%;
z-index: -1;
content: '';
border-radius: 0 0 375rpx 375rpx/0 0 70rpx 70rpx;
background: #40b368;
}