前天产品经理李二狗找到了我,提了一个需求,需要做一张优惠券,样子是这样的。
我觉得这个需求很简单啊,只需要贴一张图片就可以了。但是李二狗接着说:左边的渐变色要求可以随意配置
。
看来贴图不行了,作为一个有追求的后端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,则不会产生效果,即看到的是原图。
后记
李二狗骗了我