<!-- 优惠券 --> <view class="select_price" bindtap="getCoupon" style="border-top:1rpx solid #f5f5f5;"> <view class="s_title"> <view>领券</view> <!-- 实现波浪线的div --> <view class="wave-container"> <view class="wave">满200减122010</view> <view class="wave-left-decorate"></view> <view class="wave-right-decorate"></view> </view> </view> <image class="s_img" src='https://tws.cnweisou.com/images/rightArrow.png'></image> </view> <!-- 优惠券 -->
.wave-container { display: inline-block; position: relative; box-sizing: border-box; margin:0 28px 0 10rpx; } .wave { font-size: 20rpx; color: #fff; width: 100%; height: 40rpx; background: #e50b0b; padding: 5rpx 15rpx; box-sizing: border-box; } /* 波浪线 */ .wave-left-decorate{ position: absolute; top: 28rpx; width: 30rpx; height: 16rpx; transform-origin: center left; transform: rotate(270deg); background: radial-gradient(circle, #fff 2px, #fff, transparent 3px, transparent 4px, transparent 4px, transparent); background-size: 8px 8px; } .wave-right-decorate{ position: absolute; top: 30rpx; right: 0; width: 30rpx; height: 16rpx; transform-origin: center right; transform: rotate(90deg); background: radial-gradient(circle, #fff 2px, #fff, transparent 3px, transparent 4px, transparent 4px, transparent); background-size: 8px 8px; }