纯 css 制作优惠券缺口，不遮挡父盒子

发现在很多前端项目上基本涉及到优惠券相关的样式，我们的UI小姐姐都会在里面做个小缺口，比如这样：

这时候我们拿到UI图的时候就开始撸码。

首先我们先把大概样式写出来：

<div class="coupon">
  <div class="coupon-l"></div>
  <div class="coupon-r"></div>
</div>

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
}

.coupon-l {
  height: 100%;
  width: 200px;
  background-color: #2f68e7;
}

.coupon-r {
  height: 100%;
  flex: 1;
  background-color: #12cc69;
}

然后我们在父盒子coupon里写两个伪类，定位到缺口处：

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.coupon-l {
  height: 100%;
  width: 200px;
  background-color: #2f68e7;
}

.coupon-r {
  height: 100%;
  flex: 1;
  background-color: #12cc69;
}

.coupon::before {
  position: absolute;
  left: 192px;
  top: -8px;
  width: 16px;
  height: 16px;
  background-color: #000;
  border-radius: 50%;
  content: "";
}
.coupon::after {
  position: absolute;
  left: 192px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background-color: #000;
  border-radius: 50%;
  content: "";
}

最后我们把伪类的背景颜色设置成和底色一样，缺口就出来了：

.coupon::before {
  position: absolute;
  left: 192px;
  top: -8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  content: "";
}
.coupon::after {
  position: absolute;
  left: 192px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  content: "";
}

这样就完成了。

但是以上方法有没有什么问题呢，好像也没有，只是突然有一天我们的UI小姐姐说，页面背景色要换成渐变色，比如这样：

问题立马就出现了，缺口把底色给遮挡住了。

有没有什么方法解决呢，肯定是有的，接下来就用 radial-gradient 径向渐变来解决：

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at right top, transparent 8px, #000 0) top left / 200px 88px no-repeat,
              radial-gradient(circle at right bottom, transparent 8px, #edbf40 0) bottom left / 200px 88px no-repeat,
              radial-gradient(circle at left top, transparent 8px, #edbf40 0) top right / 486px 88px no-repeat,
              radial-gradient(circle at left bottom, transparent 8px, #000 0) bottom right / 486px 88px no-repeat
}

.coupon-l {
  height: 100%;
  width: 200px;
}

.coupon-r {
  height: 100%;
  flex: 1;
}

这里我们不设置子盒子 coupon-l 和 coupon-r 的背景颜色，通过父盒子 coupon 设置多个 background 进行填充,把 radial-gradient 里的圆的背景色设置成透明色 transparent ，就不会遮挡住底色啦。

以上为了便于理解，我把颜色设置成黑色和黄色相间，然后我们把上面的颜色统一一下，就会得到最终效果：

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at right top, transparent 8px, #4158d0 0) top left / 200px 88px no-repeat,
              radial-gradient(circle at right bottom, transparent 8px, #4158d0 0) bottom left / 200px 88px no-repeat,
              radial-gradient(circle at left top, transparent 8px, #12cc69 0) top right / 486px 88px no-repeat,
              radial-gradient(circle at left bottom, transparent 8px, #12cc69 0) bottom right / 486px 88px no-repeat
}

.coupon-l {
  height: 100%;
  width: 200px;
}

.coupon-r {
  height: 100%;
  flex: 1;
}

这样就完成了。

但是以上方法有没有什么问题呢，好像也没有，只是突然又有一天我们的UI小姐姐说，卡券子盒子 coupon-l 里的背景颜色也要设置成渐变色，比如这样：

好像使用 radial-gradient 径向渐变解决不了了。

那有没有什么其他方法解决呢，肯定也是有的，接下来就用 clip-path: path() 进行路径切割。

首先我们先确定他的切割路径：

最终得到一下效果：

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  clip-path: path("M 0 0 L 0 176 L 192 176 A 8 8 0 0 1 208 176 L 686 176 L 686 0 L 208 0 A 8 8 0 0 1 192 0");
}

.coupon-l {
  height: 100%;
  width: 200px;
  background-color: #8ec5fc;
  background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
}

.coupon-r {
  height: 100%;
  flex: 1;
  background-color: #12cc69;
}

那还有没有其他的方法实现呢，肯定还有，接下来我们就用 mask遮罩，实现这个效果。

mask遮罩用法和background差不多，不同的是他只显示不透明的部分，透明部分将被隐藏，具体用法可查看：developer.mozilla.org/zh-CN/docs/…

实现如下：

.coupon {
  width: 686px;
  height: 176px;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle at 200px top, transparent 8px, #000 0) top left / 100%  50% no-repeat,
        radial-gradient(circle at 200px bottom, transparent 8px, #000 0) bottom right / 100%  50% no-repeat;
}

.coupon-l {
  height: 100%;
  width: 200px;
  background-color: #8ec5fc;
  background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
}

.coupon-r {
  height: 100%;
  flex: 1;
  background-color: #12cc69;
}

最终效果：