先看下效果

在线地址

codePen地址，该链接会和上方预览图略有不同，由于优惠券采用拼接而成，所以为了方便理解将不同部分用颜色进行区分。

前言

该方式纯粹为了ie10+兼容，所以除了兼容优势，其他方面都是要弱于mask写法，主要体现在以下几方面劣势

1. 背景必须纯色，不支持渐变
2. 代码量要大于mask，越复杂越明显
3. mask写法更灵活，有些样式可能无法实现
4. 逻辑实现更复杂，下面可以看到具体实现自行比较复杂度

如果有ie兼容问题，后期不想维护骂街，请自行使用图片方案。

第一个实现

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo1 {
  background: radial-gradient(circle at left, transparent 1em, #58a 0) left;
}
复制代码

第二个实现

可以把他理解为一个特殊的第一个实现，我们只需要对折copy即可，如下图

那么我们只需要通过background-size将div分层左右2遍，然后通过radial-gradient分别画一个透明半圆，记住这个拆分的思路，后面所有样式都是采用该思路进行实现

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo2 {
  background: radial-gradient(circle at left, transparent 1em, #58a 0) left,
    radial-gradient(circle at right, transparent 1em, red 0) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}
复制代码

第三个实现

按照第二个思路，我们只需要把样式拆成4个部分即可

代码如下

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo3 {
background: radial-gradient(circle at left top, transparent 1em, red 0) left
      top,
    radial-gradient(circle at left bottom, transparent 1em, yellow 0) left bottom,
    radial-gradient(circle at right top, transparent 1em, orange 0) right top,
    radial-gradient(circle at right bottom, transparent 1em, aqua 0) right
      bottom;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
复制代码

第四个实现

这个还是按照该思路，我们把其拆成6个部分即可

代码如下

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo4 {
background: radial-gradient(circle at left top, transparent 1em, red 0),
    radial-gradient(circle at left bottom, transparent 1em, black 0),
    radial-gradient(circle at right top, transparent 1em, yellow 0),
    radial-gradient(circle at right bottom, transparent 1em, orange 0),
    radial-gradient(circle at center top, transparent 1em, beige 0),
    radial-gradient(circle at center bottom, transparent 1em, aqua 0);
  background-size: 33.33% 50%;
  background-position: left top, left bottom, right top, right bottom,
    top center, bottom center;
  background-repeat: no-repeat;
}
复制代码

第五个实现

整体还是拆成左右2大部分，以左边部分为例，由于半圆数量是不定的，所以我们采用repeat的方式以y轴进行平铺，平铺部分用绿线标注了

代码如下

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo5 {
  background: radial-gradient(circle at left center, transparent 8px, red 0),
    radial-gradient(circle at right center, transparent 8px, orange 0);
  background-size: 50% 30px;
  background-position: left, right;
  background-repeat: repeat-y;
}
复制代码

第六个实现

这个略复杂我们可以把其看做第四实现的基础上，增加第五实现的小圆点，所以我们可以把这个样式拆成7个部分，中间部分采用repect-y的方式普通小圆球(蓝框标注)。

代码如下

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo6 {
  background: radial-gradient(circle at left top, transparent 1em, red 0),
    radial-gradient(circle at left bottom, transparent 1em, black 0),
    radial-gradient(circle at right top, transparent 1em, yellow 0),
    radial-gradient(circle at right bottom, transparent 1em, orange 0),
    radial-gradient(circle at center top, transparent 1em, beige 0),
    radial-gradient(circle at center bottom, transparent 1em, aqua 0),
    radial-gradient(circle at center center, transparent 4px, #47cf73 0)
    ;
  padding:1em 0;
  background-size: 33.33% 1em,33.33% 1em,33.33% 1em,33.33% 1em,33.33% 1em,33.33% 1em,100% 1em;
  background-position: left top, left bottom, right top, right bottom,
    top center, bottom center,left center;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-y;
  background-clip:border-box,border-box,border-box,border-box,border-box,border-box,content-box;
}
复制代码

总结

如果没有兼容要求还是使用mask实现最好，无论从哪方面看mask都要由于此方式，第六种实现代码有些冗余，如果有更好的方式希望能告知一下。

仅作为抛砖引玉，如果有兼容考虑还是上图片比较好，后期别人维护容易被人打死，自己维护容易愁死。