css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理

1.优惠券如图这样:

css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理

实现:

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style>
body{
background-color: red;
}
.base-coupons {
width: 300px;
height: 500px;
margin: 20% auto;
/* 重点代码 */
background: radial-gradient(circle at left bottom, transparent 20px, white 0) top left / 50% 70% no-repeat,
radial-gradient(circle at left top, transparent 20px, white 0) bottom left /50% 31% no-repeat,
radial-gradient(circle at right bottom, transparent 20px, white 0) top right /50% 70% no-repeat,
radial-gradient(circle at right top, transparent 20px, white 0) bottom right /50% 31% no-repeat;
filter: drop-shadow(0 0 10px black);
border-radius: 10px;
}

</style>
</head>
<body>
<div class="base-coupons">示例</div>
</body>
</html>

解析:
css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理

css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理

css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理


2.邮票如图:

css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理
实现:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style>
.base-coupons {
width: 600px;
height: 300px;
margin: 250px auto;
position: relative;
background: radial-gradient(circle at right top, transparent 10px, red 0) top left / 30% 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, red 0) bottom left /30% 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, blue 0) top right /70% 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, blue 0) bottom right /70% 51% no-repeat;
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
}

.base-coupons::before {
content: '';
height: 270px;
border: 2px dashed white;
position: absolute;
left: 30%;
top: 0;
bottom: 0;
margin: auto -2px;
}

.base-coupons::after {
content: '';
position: absolute;
height: 100%;
width:5px;
top: 0;
right: -5px;
background-image: linear-gradient(to bottom, blue 5px, transparent 5px, transparent),
radial-gradient(10px circle at 5px 10px, transparent 5px, blue 5px);
background-size: 5px 15px;
}


</style>
</head>
<body>
<div class="base-coupons">示例</div>
</body>
</html>

当然,也可以使用 .png 格式的图片做背景,使用 filter属性 沿边投影处理


css 类似优惠券邮票那样的内抠圆角样式,内凹圆角处理
https://github.com/chergn/chergn.github.io/9ee312487f7d/
作者
全易
发布于
2024年3月28日
许可协议