用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>
複製代碼