阅读 424

用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,则不会产生效果,即看到的是原图。

后记

李二狗骗了我

关注下面的标签,发现更多相似文章
评论