微信小程序优惠券样式_微信小程序优惠券列表领取样式

<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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38