纯 CSS 实现优惠券效果

（本文不是广告，因为没给钱。）我厂 code.fun 上线了付费购买与优惠券功能，欢迎各位新老顾客莅临。

上面是优惠券的视觉效果，本文分享如何使用纯 CSS 实现它，希望对大家有帮助。

0. 分析

首先，我们来分析一下这个优惠券的实现方案。

左边是摘要，右边是详情，这个部分用 display:flex 很容易就能搞定。中间的虚线，使用任意一个容器边框 + 少许 padding 即可实现。其它部分，也就是些字体行高，都不是很复杂。难点在于投影，尤其是左右两个挖空的半圆。

1. 挖空

首先，我们给整个优惠券矩形加上投影
然后，我们给两边加上两个包含内投影的圆形
这个时候，两边的内投影原型会多出来一块，我们需要把它们盖住。但是，不能让矩形 overflow:hidden，因为投影也会变，如下图。

.coupon {
  width: 15rem;
  height: 6rem;
  background: white;
  box-shadow: 1px 1px 6px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  
  &::before,
  &::after {
    background-color: white; 
    border-radius: 1rem;
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.15);
    content: '';
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 2rem;
    z-index: 1;
  }  

  &::before {
    left: -1rem;
  }
  &::after {
    right: -1rem;
  }
}