纯CSS的方式实现优惠券的波浪、内凹圆型的透明锯边效果。_css 优惠券内凹

作者：天景科技苑 | 2024-08-09 01:56:10

踩

css 优惠券内凹

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  .coupon {
			display: inline-block;
			height: 88px;
			width: 300px;
			margin-top: 10px;
			
			//参数说明：园渐变或线性渐变 [left|right] 坐标数 [top|bottom] 坐标数 repeat参数,
			background: radial-gradient(circle at 10px 10px, transparent 5px, #fff 5px) left -10px top 0 repeat-y,
				linear-gradient(90deg, #fff, #feaaaa) left 10px top 0 no-repeat,
				radial-gradient(circle at 10px 0, transparent 5px, #feaaaa 5px) left calc(40% - 5px) top 0 no-repeat,
				radial-gradient(circle at 10px 10px, transparent 5px, #feaaaa 5px) left calc(40% - 5px) bottom 0px no-repeat,
				linear-gradient(90deg, #feaaaa, #fe434c) right 10px top 0 no-repeat,
				radial-gradient(circle at 10px 10px, transparent 5px, #fe434c 5px) right -10px top 0 repeat-y;

			//背景结构大小，顺序对应background里的背景内容
			background-size: 20px 17px,
				calc(40% - 15px) 88px,
				20px 78px,
				20px 10px,
				calc(60% - 15px) 88px,
				22px 17px;

		}
  </style>
 </head>
 <body style="background-color: rgba(127, 193, 255, 1)">
	<div style="width: 500px">
		<div class="coupon"></div>
		<div class="coupon"></div>
		<div class="coupon"></div>
	</div>
 </body>
</html>
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

执行效果：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/950889