css3实现优惠券效果（向内凹的圆）

背景色和自身（优惠券）的颜色会改变，实现向内凹的圆效果，效果图如下。如果叫设计师切好几十种背景图是很不现实的，只能用代码来实现，性能会比较好。随着背景色的改变，向内凹圆的背景色也要跟着变，因此，向内凹陷的部分只能设置成透明。

实现如下三种情况：

1、第一种情况（纯色）

自身（优惠券）的颜色是纯色的，这个实现起来比较简单，主要代码如下：

<div class="box"></div>

 .box{
      width: 160px;
      height: 100px;
      background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
      background-position: 121px -8px;
      background-size: 100% 100px;