CSSはクーポンスタイルを実装するために放射状グラデーションを使用します

<div class="バウチャー">
  <div class="left"></div>
  <div class="right">100 から 30 を引いた金額を支出</div>
</div>

/* SCSS */
.バウチャー{
  幅: 600ピクセル;
  高さ: 200px;
  ディスプレイ: フレックス;
  。左 {
    幅: 30%;
    高さ: 100%;
    背景色: #f76260;
  }
  。右 {
    高さ: 100%;
    境界線: 1px 実線 #ddd;
    フレックス: 1;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    フォントサイズ: 40px;
  }
}

＆：：前に {
  コンテンツ： '';
  位置: 絶対;
  高さ: 100%;
  幅: 6px;
  左: 0;
  上: 0;
  背景画像: 放射状グラデーション(0px 10pxの円、白6px、#f76260 6px);
  背景サイズ: 6px 20px;
}

/**
  * より良い結果を得るためには、次の点に注意してください。
  * 1. $height は $num で割り切れる * 2. 2 * $radius < $height / $num
  */
@mixin leftSawtooth($height, $num, $radius, $color, $bgColor) {
  $セグメントの高さ: $height / $num;
  高さ: $height;
  ＆：：前に {
    コンテンツ： '';
    位置: 絶対;
    高さ: 100%;
    幅: $radius;
    左: 0;
    上: 0;
    背景画像:
      放射状グラデーション(0pxの円、$segmentHeight / 2、$bgColor $radius、$color $radius);
    背景サイズ: $radius $segmentHeight;
  }
}

.バウチャー{
  幅: 600ピクセル;
  高さ: 200px;
  マージン: 20px 自動;
  ディスプレイ: フレックス;
  位置: 相対的;
  境界線: 1px 実線 #ddd;
  。左 {
    幅: 30%;
    高さ: 100%;
    border-right: 1px 破線 #ddd;
  }

  。右 {
    高さ: 100%;
    フレックス: 1;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    フォントサイズ: 40px;
  }
}

背景画像: 放射状グラデーション(0px 10pxの円、
  white 5px, /* 円の内側の色は背景色です*/
  #ddd 5ピクセル、
  #ddd 6ピクセル、
  transparent 6px /* 円の外側の色は透明です*/
);

@mixin leftSawtoothBorder($height, $num, $radius, $bgColor, $borderColor, $borderWidth) {
  $セグメントの高さ: $height / $num;
  $extendedRadius: $radius + $borderWidth;
  高さ: $height;
  ＆：：前に {
    コンテンツ： '';
    位置: 絶対;
    高さ: 100%;
    幅: $extendedRadius;
    左: -$borderWidth;
    上: 0;
    背景画像: 放射状グラデーション(0pxの円 $segmentHeight / 2,
      $bgColor $radius、
      $borderColor $radius、
      $borderColor $extendedRadius、
      透明 $extendedRadius
    );
    背景サイズ: $extendedRadius $segmentHeight;
  }
}