css实用技巧之制作优惠券凹槽

日常开发中很多商城类项目都需要涉及优惠营销类，自然少不了优惠券的页面制作。而优惠券的设计经常会遇到凹槽，对于刚入门的前端来说没接触过就可能很难想象出如何能用纯CSS写出凹槽，很多人会使用图片作为背景，但使用图片有很大弊端，适用性不够广泛、不易扩展、图片较大占用网络等等。相反使用CSS实现容易扩展优惠券内容，几行代码又大大减小网络占用。今天咱就说说凹槽是如何实现的:
Alt
以下样式基于HTML:

1
<div class="coupon"></div>

1、纯色优惠券

在这里插入图片描述

1
2
3
4
5
6
7
8
.coupon{
	width:240px;
	height:100px;
	border-radius:10px;
	background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
    background-position: 66px -8px;
    background-size: 100% 100%;
}

2、线性渐变

在这里插入图片描述

1
2
3
4
5
6
7
8
9
.coupon{
	width:240px;
  height: 100px;
  background: linear-gradient(to right, #fd6868, #fd5252 60px) no-repeat left / 60px 100%,
              radial-gradient(circle at 8px 8px, transparent 8px, #fd5252 8px) repeat-y 60px -8px / 16px 100%, 
              linear-gradient(to right, #fd5252 76px, #fe0000) no-repeat 76px 0 / 100% 100%;
  position:relative;
  border-radius:10px;
}

3、带阴影

正常我们使用阴影是box-shadow,但是box-shadow是根据盒子边缘进行投影，而使用背景透明用box-shadow是无法投影，需要使用filter:drop-shadow();

1
box-shadow:2px 3px 6px 0 black;

在这里插入图片描述

1
filter: drop-shadow(2px 4px 6px black);

4、对于没有阴影且背景纯色，可使用伪类实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.coupon-container{
	--bg-color:#fff;
	background:var(--bg-color);
}
.coupon{
	width:240px;
	height:100px;
	border-radius:10px;
	position:relative;
	background: #fd6868;
}
.coupon::before, .coupon::after{
	content:'';
	display:block;
	width:12px;
	height:6px;
	position:absolute;
	left:60px;
	background:var(--bg-color);
}
.coupon::before{
	top:0;
	border-radius:0 0 6px 6px;
}
.coupon::after{
	bottom:0;
	border-radius:6px 6px 0 0;
}