用css做一张优惠券

前天产品经理李二狗找到了我，提了一个需求，需要做一张优惠券，样子是这样的。

我觉得这个需求很简单啊，只需要贴一张图片就可以了。但是李二狗接着说：左边的渐变色要求可以随意配置。

看来贴图不行了，作为一个有追求的后端api测试人员，我觉得可以尝试一下。

优惠券1.0版本

这里的核心有两个问题，第一个是左侧的锯齿边。第二个是上下的圆形切角。不过这个难不倒我，马上我就写出了第一个版本。

.coupon{
    width:320px;
    height:80px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    display: flex;
}
.coupon:after,.coupon:before{
    content: "";
    position: absolute;
    display: block;
    width:10px;
    height:10px;
    z-index: 2;
    left: 75px;
    background: #fff;
    border-radius: 5px;
}
.coupon:after{
    bottom: -5px;
}
.coupon:before{
    top: -5px;
}
.coupon-left{
    width:80px;
    height: 80px;
    background-image: linear-gradient(315deg, #ff8325 0%, #ffc156 60%, #ffe06d 100%);
    position: relative;;
}
.coupon-left:after{
   content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 4px;
    height: 100%;
    right: 0px;
    z-index: 1;
    background-position: 0px 0px;
    background-color: transparent;
    background-size: 4px 4px;
    background-image: radial-gradient(circle at right, #fff3ed 2px, transparent 0);
}
.coupon-right{
    background-color:#fff3ed;
    flex:1;
    height: 80px;
}

<div class="coupon">
	<div class="coupon-left">
		
	</div>
	<div class="coupon-right">
		
	</div>
</div>

锯齿采用了backgroun-image，利用径向渐变circle at right先画出一个中心点在右侧的圆形。然后用backgroun-size控制它的大小。

利用定位，叠加到左侧，然后再画两个白色圆放置在上下形成切角。

这是一个很完美的解决方案，如果需要变换颜色，只要换左边的颜色就可以了。

噩耗

我把做出来的优惠券甩到李二狗的脸上，然后轻蔑的一笑。

这个moment，李二狗一脸便秘的跟我说：哥们，有一点小变故。老板看过之后，觉得右边太素，希望加入奔放热情的红，然后背景色希望是五彩斑斓的黑。

效果图是这样的：

这种事情怎么可能难得到我，轻轻松松30秒就完成。

优惠券2.0

在李二狗不断的以不少于5顿烧烤以及给我介绍妹子的利诱下，我再次沉浸在代码的世界中完成了第二版。

body{
    background:linear-gradient(315deg,red,green,blue,purple,orange);
}
.coupon{
    width:320px;
    height:80px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    display: flex;
    background:linear-gradient(0deg,rgba(255,13,13,1) 0%,rgba(255,110,42,1) 100%);

    -webkit-mask-image: radial-gradient(circle at bottom, transparent 5px, black 0) ,radial-gradient(circle at top, transparent 5px, black 0);
    -webkit-mask-position: -120px bottom,-120px top;
    -webkit-mask-size: 400px 75px;
    -webkit-mask-repeat: space;
}

.coupon-left{
    width:80px;
    height: 80px;
    background-image: linear-gradient(315deg, #ff8325 0%, #ffc156 60%, #ffe06d 100%);
    position: relative;;
    -webkit-mask-image: radial-gradient(circle at right, transparent 2px, black 0);
    -webkit-mask-position: top right;
    -webkit-mask-size: 80px 4px;
    -webkit-mask-repeat: repeat-y;
	    
}

.coupon-right{
    flex:1;
    height: 80px;
}

<body>
    <div class="coupon">
    	<div class="coupon-left">
    		
    	</div>
    	<div class="coupon-right">
    		
    	</div>
    </div>
</body>

这里是利用mask这个属性，对图片进行部分的遮罩。

注意：此属性在ie上不兼容

如果你是移动端则基本都可以支持此属性。

在本文的例子当中我们用了4个属性

mask-image
mask-position
mask-size
mask-repeat

这四个属性的用法与background极其相似，需要特别注意的是 mask-image这个属性。

遮罩的图片可以是url()图片资源，包括png,jpg，svg,base64等。也可以是一个由css3渐变出来的图片，如本文例子中所示。遮罩部分只跟图片的透明度有关，而跟颜色无关，如例子中的切角使用的实际是如下图所示的图片

而我们把颜色从black改为白色或者其他任意不透明颜色，对遮罩部分不产生影响。

引用图片时，如果图片本身不透明，如jpg，则不会产生效果，即看到的是原图。

后记

李二狗骗了我