css 优惠券锯齿效果

最近有个优惠券需求，需要生成锯齿边 代码如下：

• 效果
• css

coupon {
   display: flex;
   flex: 1;
   &-left {
       background: linear-gradient(
           90deg,
           rgba(85, 212, 203, 1) 0%,
           rgba(75, 209, 179, 1) 100%
       );
       border-radius: 8px 0 0 8px;
       height: 200px;
       position: relative;
       width: 250px;
       &:before {
           background-image: radial-gradient(#fff 8px, transparent 8px);
           background-repeat: repeat-y;
           background-size: 20px 20px; /* 一个repeat的大小 */
           content: '';
           display: block;
           height: 100%;
           left: -12px;
           position: absolute;
           top: 0;
           width: 20px;
       }
   }
   &-right {
       flex: 1;
   }
}

• html

      <div className="coupon">
            <div className="coupon-left">          
            </div>
            <div className="coupon-right"></div>
        </div>