移动端优惠券的样式设计

UI小姐姐给了一套优惠券的样式，我看了几张效果图后心里就已经想好几种方法来实现了，但是等我看完后就发现那个想法是行不通的，因为有些页面是有不同的背景色，渐变色，图片效果等

1、如果是用背景图的话，那么就会切多张图片放在文件中，而且页面引用的也会很多，会占内存，还会有图片不高清的情况，直接舍弃了

2、自定义背景色，然后用伪元素来实现2个半圆效果，这个只能在纯色背景上使用，如果是多色背景的话就不行了，也舍弃

3、经过参考后，选择了使用css中的背景渐变属性来设置，代码少，已修改，可实现多种样式

实现下面这个效果

第一步：设置公共卡券背景样式

:root{ 
    // 优惠券的圆
    --circleW:rem(12);
    // 优惠券左侧背景宽度
    --circleL:rem(550);
    // 优惠券背景
    --circleBg:#fff;
}
// 卡券背景
.cardBg{
    width: 100%;
    height: 100%;
    position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;z-index: -1;
    background: radial-gradient(circle at right top, transparent var(--circleW), var(--circleBg) 0px) top left/var(--circleL) 60% no-repeat, 
    radial-gradient(circle at right bottom, transparent var(--circleW), var(--circleBg) 0) bottom left/var(--circleL) 60% no-repeat,
    radial-gradient(circle at left top, transparent var(--circleW), var(--circleBg) 0) var(--circleL) top/2.6667rem 60% no-repeat, 
    radial-gradient(circle at left bottom, transparent var(--circleW), var(--circleBg) 0) var(--circleL) bottom/3.6667rem 60% no-repeat;
   //给卡券加阴影效果 filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
   &::after{content: "";display: block;border-left: 1px dashed #f0f0f0;position: absolute;left: var(--circleL);top: rem(20);bottom: rem(20);z-index: -1;}
}

// 卡券容器
.cardList_item{position: relative;z-index: 1;overflow: hidden;@extend .flex1;@extend .flexStyle;@extend .stretch;transition: all linear .2s;
    &>a{@extend .flex1;}
    .itemL{position: relative;overflow: hidden;z-index: 1;@extend .flex;width: var(--circleL);}
    .itemR{@extend .flex1;@extend .disFlex;@extend .justifyContentC;@extend .flexDirection;position: relative;
    }
}

第二步：设置公共卡券结构

<div class="cardList_item">
    <div class="cardBg"></div>
    <div class="itemL">
        左侧内容
    </div>
    <div class="itemR">
        右侧内容
    </div>
</div>

在此基础上还可以实现多种效果：