纯CSS 实现常用优惠券样式（反向圆角+带轮廓阴影）

背景

在电商行业的前端中，经常会遇到这样的优惠券样式

研发同学迫于时间或者其他种种原因，可能会采用一张背景图，或者使用圆形来遮盖实现，但这两种都有比较明显缺点。

• 背景图，对于不同屏幕尺寸，两边的半圆可能会失真
• 圆形遮盖，需要与背景色相同，如果有阴影的话，此方案行不通

解决方案

1. 如何绘制反向圆角

除去圆形遮盖的方法，我们可以通过css的背景径向渐变background: radial-gradient()来实现。

.radio-corner {
  background: radial-gradient(20px at left bottom,transparent 50%,orange 50%);
}

很显然，只有一个缺角。我们需要两个。
我们可以通过组合的形式来获得两个圆缺角，避免产生多余的dom，我们可以使用伪类。

<style>
  .pro:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
    background: radial-gradient(20px at left bottom,transparent 50%,orange 50%);
    border-radius: 0 4px 0 0;
}

.pro:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
    background: radial-gradient(20px at right bottom,transparent 50%,orange 50%);
    border-radius: 4px 0 0 0;
}
</style>

<div class="pro" style="position: relative;padding: 0 10px;">
  <div style="padding: 15px 0;">
    <h4>全场5折</h4>
    <p>仅在指定活动页面使用,最终解释权归我们</p>
  </div>
</div>

2. 通过组合的形式绘制完整优惠券

<style>
.coupon:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.coupon:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.coupon.up::after {
    background: radial-gradient(20px at right bottom,transparent 50%,orange 50%);
    border-radius: 0 4px 0 0;
}

.coupon.up::before {
    background: radial-gradient(20px at left bottom,transparent 50%,orange 50%);
    border-radius: 4px 0 0 0;
}

.coupon.down::before {
    background: radial-gradient(20px at left top,transparent 50%,orange 50%);
    border-radius: 0 0 0 4px;
}

.coupon.down:after {
    background: radial-gradient(20px at right top,transparent 50%, orange 50%);
    border-radius: 0 0 4px 0;
}
</style>
<div style="margin: 20px; color: white;">
  <div class="coupon up" style="position: relative; padding: 0 10px;">
    <div style="border-bottom: 1px white dashed;padding: 15px 0;">
      <h4>全场5折</h4>
      <p>仅在指定活动页面使用,最终解释权归我们</p>
    </div>
  </div>
  <div class="coupon down" style="position: relative;padding: 10px;">
    <p>有效期：2021/10/1 ~ 2021/10/7</p>
  </div>
</div>

效果

3. 绘制阴影
通过box-shadow设置阴影

<div style="margin: 20px; color: white;box-shadow: 0 0 8px grey">

啊欧，这并不是我们想要的。那咋办呢？ 有个属性可以解决filter: drop-shadow()。

<div style="margin: 20px; color: white;filter: drop-shadow(0px 0px 3px gray)">

总结

此方案涉及两个要点: radial-gradient和drop-shadow。
它俩的缺点也是此方案的缺点：不兼容性ie，具体兼容性可以自行科普。

思考

如何使用切图素材并解决图片失真的问题？
使用两张切图，左右各一，背景尺寸保持不变，这样宽度变化时，背景图保持两边对齐，中间部分采用填色来兜底。