CSS 实现「内凹圆角」「波浪」

波浪

效果一

• 效果图

• html

<view class="style-css"></view>

• css

.style-css{
	position: relative;
	top: -34rpx;
	z-index:200;
	width: calc(100% - 64rpx);
	height: 25rpx;
	margin: 0 auto;
	background-image: radial-gradient(circle, transparent, transparent 20rpx, #FFFFFF 20rpx, #FFFFFF);
	background-size: 60rpx 60rpx;
 }

内凹圆角

效果二

• 效果图

• html

<view class="main"></view>

• css

                 .main {
		 	position: relative;
		 	width: 200px;
		 	height: 40px;
		 	margin: 0 5px;
		 	background: linear-gradient(to right, #FF8238, #aaff7f);
		 }
		 .main::before {
		  	position: absolute;
		  	content: "";
		  	display: block;
		  	position: absolute;
		  	top: 0;
		  	left: -5px;
		  	width: 5px;
		  	height: 40px;
		  	border-radius: 2px 0 0 2px;
		  	background: radial-gradient(10px at left,transparent 50%,#FF8238 50%);
		  }
		  .main::after {
		  	position: absolute;
		  	content: "";
		  	display: block;
		  	position: absolute;
		  	top: 0;
		  	right: -5px;
		  	width: 5px;
		  	height: 40px;
		  	border-radius: 0 2px 2px 0;
		  	background: radial-gradient(10px at right,transparent 50%,#aaff7f 50%);
		  }

效果三

• 效果图

• html

<view class="three-box">
    <view class="left">
        <view class="left-top"></view>
        <view class="left-bottom"></view>
    </view>
    <view class="right">
            <view class="right-top"></view>
            <view class="right-bottom"></view>
    </view>
</view>

• css

.three-box{
        width: calc(100% - 64rpx);
        height: 100vh;
        padding: 0 32rpx;
        background-color: #28bc9f;
        display: flex;
        flex-direction: row;
        align-items: center;
        .left{
                width: 40%;
                height: 160rpx;
                background-color: $app-basic-theme-color;
                border-top-left-radius: 20rpx;
                border-bottom-left-radius: 20rpx;
                position: relative;
                .left-top{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background:radial-gradient(30rpx at right top,#28bc9f 50%,$app-basic-theme-color 50%);
                }
                .left-bottom{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background:radial-gradient(30rpx at right bottom,#28bc9f 50%,$app-basic-theme-color 50%);
                }
        }
        .right{
                width: 60%;
                height: 160rpx;
                background-color: #FFFFFF;
                border-top-right-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                position: relative;
                .right-top{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background:radial-gradient(30rpx at left top,#28bc9f 50%,#FFFFFF 50%);
                }
                .right-bottom{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background:radial-gradient(30rpx at left bottom,#28bc9f 50%,#FFFFFF 50%);
                }
        }
}