微信小程序优惠券样式

<view class="coupon-view">
   <view class="coupon-left"></view>
   <view class="coupon-right"></view>
</view>
<!--  -->
.coupon-view {
  display: flex;
  position: relative;
  width: 710rpx;
  height: 220rpx;
  margin: 100rpx auto;
  filter: drop-shadow(4rpx 4rpx 10rpx #808080);
}

.coupon-left {
  background: radial-gradient(circle at top right, transparent 10rpx,  orange 0) top right, radial-gradient(circle at bottom right, transparent 10rpx,  orange 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  color: #fff;
  width: 70%;
  border-radius: 10rpx 0 0 10rpx;
}

.coupon-right {
  background: radial-gradient(circle at top left, transparent 10rpx,  orange 0) top left,radial-gradient(circle at bottom left, transparent 10rpx,  orange 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  width: 30%;
  color: #fff;
  border-radius: 0 10rpx 10rpx 0; 
}
.coupon-right::after{
  content: "";
  position: absolute;
  top: 10rpx;
  height: 200rpx;
  border-left: 2rpx dashed #fff;
}