CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。

布局

布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图，而这里，我们就只是最简单的布局方式，从上而下：

1、优惠券金额和过期时间

2、优惠券描述

3、按钮（其实按钮也可以放到“2”里面去）

这样分析，我们就有了 html 架构了

<div class="coupon">
  <!-- 1、优惠券金额和过期时间 -->
  <div class="price">
    100元
    <span>优惠券</span>
    <p class="timeout">2020-12-31 18:18:18过期</p>
  </div>

  <!-- 2、优惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、过期作废</p>
  </div>

  <!-- 3、按钮 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

这里用到了 径向渐变，不清楚用法的小伙伴可以看看语法：