用css作一张优惠券

时间 2019-11-06

标签 css 一张优惠券栏目 CSS 繁體版

原文原文链接

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

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

看来贴图不行了，做为一个有追求的后端api测试人员，我以为能够尝试一下。html

优惠券1.0版本

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

.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控制它的大小。web

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

这是一个很完美的解决方案，若是须要变换颜色，只要换左边的颜色就能够了。api

噩耗

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

这个moment，李二狗一脸便秘的跟我说：哥们，有一点小变故。老板看过以后，以为右边太素，但愿加入奔放热情的红，而后背景色但愿是五彩斑斓的黑。测试

效果图是这样的：flex

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

优惠券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，则不会产生效果，即看到的是原图。

后记

李二狗骗了我