纯CSS优惠券样式_css 优惠券

HTML

<div class="coupon-box">
  <div class="coupon-box-top"></div>
  <div class="coupon-box-bottom"></div>
</div>
1
2
3
4

CSS

.coupon-box {
  width: 702px;
}

.coupon-box-top,
.coupon-box-bottom {
  position: relative;
  padding: 24px 28px;
}

.coupon-box-top {
  width: 100%;
  height: 50px;
  background:
    radial-gradient(circle at bottom right, transparent 16px, #fff 0) no-repeat bottom right,
    radial-gradient(circle at bottom left, transparent 16px, #fff 0) no-repeat bottom left;
  background-size: 50% 100%;
  border-radius: 8px 8px 0 0;
}

.coupon-box-top::after {
  content: ' ';
  height: 1px;
  position: absolute;
  left: 16px;
  bottom: 0;
  right: 16px;
  border-bottom: 1px dashed #D9D9D9;
}

.coupon-box-bottom {
  width: 100%;
  height: 100px;
  background:
    radial-gradient(circle at top left, transparent 16px, #fff 0) no-repeat top left,
    radial-gradient(circle at top right, transparent 16px, #fff 0) no-repeat top right;
  background-size: 50% 100%;
  border-radius: 0 0 8px 8px;
}

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

如果想要自适应高度可以删除width和height

效果