CSS实现优惠券样式

左半圆

.coupon {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at left center, transparent 20px, #35bef7 20px);
    }

左右半圆

.coupon2 {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at 0, #0000 20px, #35bef7 0), radial-gradient(circle at right, #0000 20px, #35bef7 0);
      -webkit-mask-size: 51%;
      -webkit-mask-position: 0, 100%;
      -webkit-mask-repeat: no-repeat;
    }

左内圆

.coupon3 {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at 20px, #0000 20px, #35bef7 0);
    }

四角收缩

.coupon4 {
      -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, #35bef7 0) -20px -20px;
    }

六角收缩

.coupon5 {
      -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, #35bef7 0) -20px -20px / 50%;
    }

凹边

.coupon6 {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at 10px, #0000 10px, #35bef7 0);
      -webkit-mask-position: -10px;
      -webkit-mask-size: 100% 30px;
    }

中排圆点

.coupon7 {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at 50%, #35bef7 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, #35bef7 0) -20px -20px / 50%;
      -webkit-mask-composite: destination-out;
    }

两边凹陷（推荐）

.coupon8 {
      width: 100%;
      height: 100px;
      background-color: #35bef7;
      -webkit-mask: radial-gradient(circle at 5px, #35bef7 5px, transparent 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, #35bef7 0) -20px -20px / 50%;
      -webkit-mask-composite: destination-out;
    }

HTML

<div class="coupon-list">
    <div class="coupon"></div>
    <div class="coupon2"></div>
    <div class="coupon3"></div>
    <div class="coupon4"></div>
    <div class="coupon5"></div>
    <div class="coupon6"></div>
    <div class="coupon7"></div>
    <div class="coupon8"></div>
  </div>