用CSS实现优惠券的锯齿形状

• 项目背景：项目中要添加一个优惠券的模块，UI的设计稿中优惠券带有锯齿形状；分析后能想到的实现方案有两种，一种是用切图来当做背景图，一种是用CSS来编写；为了能有点挑战性并且减少一个背景图片的服务请求，所以使用CSS来编写；
• 刚开始采用的是伪元素+border的方案实现，但是H5端在IPhone12真机上预览时，发现显示为方块，不是圆圈，所以又改成了第二种方案渐变背景图实现；

1. 伪元素+border:dotted实现

• 缺点：border:dotted的兼容性不好，在不兼容的浏览器中显示为方块；

<div class="coupon-item">
    <div class="left"></div>
    <div class="right"></div>
</div>
.coupon-item {  
  margin: 30px auto;
  width: 347px;
  height: 90px;
  background: linear-gradient(90deg, #F9D5A6 0%, #FFE4C3 29%, #FFDBAE 71%, #DAAD76 100%);
  position: relative;
  border-radius: 8px;
  display: flex;
  .img-box {
    width: 60px;
    height: 53px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .left {
    width: 250px;
    height: 100%;
    color: red;
    // border-right: 1px #BF9563 dashed;
    position: relative;
    // 实现中间处的锯齿形状，锯齿长度为4
    &::before, &::after {
      content: '';
      border-bottom: 8px #FFF dotted;
      height: 8px;
      width: 8px;
      z-index: 2;
    } 
    &::before {
      position: absolute;
      top: -12px;
      right: -4px;
    }
    &::after {
      position: absolute;
      bottom: -4px;
      right: -4px;
    }
  }
  .right {
    width: 96px;
    height: 100%;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 7px;
      left: 0px;
      height: 80px;
      width: 1px;
      background-image: linear-gradient(180deg,#BF9563 0,#BF9563 4px,#fedaac 0,#fedaac 4px);
      background-repeat: auto;
      background-size: 1px 8px;
    }
  }
  // 利用伪元素+border：dotted;实现两端的锯齿形状，但是在苹果手机真机上兼容性差，会显示成方块；
  &::before, &::after {
    content: '';
    border-right: 8px #FFF dotted;
    background-size: 4px 8px;
    background-repeat: auto;
    position: absolute;
    top: 8px;
    height: 100%;
    width: 1px;
  }
  &::before {
    left: -4px;
  }
  &::after {
    right: -4px;
  }
}

兼容时的效果预览：

2. 使用径向渐变背景图编写；

• MDN文档radial-gradient用法参考
• radial-gradient：径向渐变；用法可参考
• linear-gradient：线性渐变；

<div class="coupon-item2">
    <div class="left"></div>
    <div class="right"></div>
</div>
.coupon-item2 {  
  margin: 30px auto;
  width: 347px;
  height: 90px;
  background: 
   // 左侧中间先写一个原点，让其在垂直方向上repeat
  radial-gradient(circle at left center, #F9F9F9 4px, transparent 0px), 
   // 右侧中间先写一个原点，让其在垂直方向上repeat
  radial-gradient(circle at right center, #F9F9F9 4px, transparent 0), 
   // 线性渐变的背景；从90度开始渐变，颜色-该渐变位置处的颜色；百分比-渐变位置
  linear-gradient(90deg, #F9D5A6 0%, #FFE4C3 29%, #FFDBAE 71%, #DAAD76 100%);
  background-size: 347px 17px;
  background-repeat: repeat-y;
  position: relative;
  border-radius: 8px;
  display: flex;
  .img-box {
    width: 60px;
    height: 53px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .left {
    width: 250px;
    height: 100%;
    color: red;
    background: radial-gradient(circle at right top, #F9F9F9 4px, transparent 0px) no-repeat,
    radial-gradient(circle at right bottom, #F9F9F9 4px, transparent 0px) no-repeat;
  }
  .right {
    width: 96px;
    height: 100%;
    background: radial-gradient(circle at left top, #F9F9F9 4px, transparent 0px) no-repeat, 
    radial-gradient(circle at left bottom, #F9F9F9 4px, transparent 0px) no-repeat;
    position: relative;
    // 虚线
    &::before {
      content: "";
      position: absolute;
      top: 7px;
      left: 0px;
      height: 80px;
      width: 1px;
      background-image: linear-gradient(180deg,#BF9563 0,#BF9563 4px,#fedaac 0,#fedaac 4px);
      background-repeat: auto;
      background-size: 1px 8px;
    }
  }
}

效果预览：