纯CSS优惠券样式

HTML

<div class="coupon-box">
  <div class="coupon-box-top"></div>
  <div class="coupon-box-bottom"></div>
</div>

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;
}

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

效果