凹陷的优惠券样式

.coupon-box{@themeColor:#4286F5;@themeColorDisabled：#ADAFB4；@圆宽：10px；宽度：92%；高度：115px；显示：弹性；.l{宽度：104px；高度：100%；显示：弹性；.p1,.p2{背景颜色：@themeCol或者;}.p1{宽度：94px；高度：100%；边界半径：4px004px；框阴影：0px0px12px0pxrgba(0,0,0,0.08)；}.p2{宽度：计算（@roundWidth+1px）；高度：计算（100%-@roundWidth*2）；边距顶部：自动；底部边距：自动；位置：相对；左边距：-1px；}.top,.bottom{width:calc(@roundWidth+1px);高度：60px；背景大小：10px60px；背景重复：不重复；位置：绝对；右：0；}.top{background:radial-gradient(circleatright0px,transparent10px,@themeColor10px);背景位置：右上；顶部：-@roundWidth；}.bottom{background:radial-gradient(circleatrightbottom,transparent10px,@themeColor10px);背景位置：右下角；底部：-@roundWidth；}}.r{宽度:计??算(100%-104px);高度：100%；位置：相对；显示：弹性；.p1,.p2{背景颜色：#fff;}.p1{宽度：计算（@roundWidth+1px）；高度：计算（100%-@roundWidth*2）；边距顶部：自动；底部边距：自动；位置：相对；}.p2{宽度：计算（100%-@roundWidth）；高度：100%；边界半径：04px4px0；框阴影：0px0px12px0pxrgba(0,0,0,0.08);}.top,.bottom{width:calc(@roundWidth+2px);高度：60px；背景大小：10px60px；背景重复：不重复；位置：绝对；左：0；}.top{background:radial-gradient(circleatleft0px,transparent10px,#fff10px);背景位置：左上；顶部：-@roundWidth；}.bottom{background:radial-gradient(circleatleftbottom,transparent10px,#fff10pX）;背景位置：左下角；底部：-@roundWidth；}}}}效果如下.coupon-box{@themeColor:#4286F5;@themeColorDisabled：#ADAFB4；@圆宽：10px；宽度：92%；高度：115px；显示：弹性；.l{宽度：104px；高度：100%；显示：弹性；.p1,.p2{背景颜色：@themeCol或者;}.p1{宽度：94px；高度：100%；边界半径：4px004px；框阴影：0px0px12px0pxrgba(0,0,0,0.08)；}.p2{宽度：计算（@roundWidth+1px）；高度：计算（100%-@roundWidth*2）；边距顶部：自动；底部边距：自动；位置：相对；左边距：-1px；}.top,.bottom{width:calc(@roundWidth+1px);高度：60px；背景大小：10px60px；背景重复：不重复；位置：绝对；右：0；}.top{background:radial-gradient(circleatright0px,transparent10px,@themeColor10px);背景位置：右上；顶部：-@roundWidth；}.bottom{background:radial-gradient(circleatrightbottom,transparent10px,@themeColor10px);背景位置：右下角；底部：-@roundWidth；}}.r{宽度:计??算(100%-104px);高度：100%；位置：相对；显示：弹性；.p1,.p2{背景颜色：#fff;}.p1{宽度：计算（@roundWidth+1px）；高度：计算（100%-@roundWidth*2）；边距顶部：自动；底部边距：自动；位置：相对；}.p2{宽度：计算（100%-@roundWidth）；高度：100%；边界半径：04px4px0；框阴影：0px0px12px0pxrgba(0,0,0,0.08);}.top,.bottom{width:calc(@roundWidth+2px);高度：60px；背景大小：10px60px；背景重复：不重复；位置：绝对；左：0；}.top{background:radial-gradient(circleatleft0px,transparent10px,#fff10px);背景位置：左上；顶部：-@roundWidth；}.bottom{background:radial-gradient(circleatleftbottom,transparent10px,#fff10pX）;背景位置：左下角；底部：-@roundWidth；}}}}这里最大的难点是既要凹又要透明，而且coupon整体要有box-shadow而且手机之间会有div可能会出现莫名其妙的连接缝隙.尝试伪类，纯径向渐变+线性渐变并不理想。看了几个现有的实现，都不满意，比如https://codepen.io/Ariex/pen/…https://codepen.io/mudontire/…