前端优惠券样式实现

实现效果

上代码，我是用uni-app写的 大家可以自行参照修改
界面代码

<view class="quan" v-for="(item,i) in couponList" :key="i">
	<view class="quanInfo">
		<text class="couponMpoey">￥20 <text class="couponMpoeyInfo">满300减20</text></text>
		<text class="couponName">店铺优惠劵</text>
		<text class="couponTime">2019.8.1 00:00-2019.8.123:59</text>
	</view>
	<view class="receiveBtn">
		<view class="receive">使用</view>
	</view>
</view>

CSS代码

	.quan{
		margin: 22rpx 37rpx;
		background-color: #FFF5F6;
		border-radius: 10rpx;
		display: flex;
		font-family: PingFang SC;
	}
	.quanInfo{
		background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		border-right: 1px dashed #F64F51;
		padding: 30rpx 50rpx;
		width: 75%;
	}
	.couponMpoey{
		font-size: 30rpx;
		font-weight: 700;
		color: #ff3600;
		display: block;
	}
	.couponMpoeyInfo{
		font-size: 26rpx;
		padding-left: 10rpx;
	}
	.couponName{
		font-size: 24rpx;
		font-weight: 500;
		color: #797979;
		display: block;
	}
	.couponTime{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #797979;
	}
	.receiveBtn{
		background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -2rpx;
	}
	.receive{
		border-radius: 23rpx;
		background-color: #5FC484;
		padding: 7rpx 31rpx;
		text-align: center;
		margin-left: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}