两种纯CSS的方式实现优惠券上的锯齿效果

昨天有个模块分到我手里了，有个优惠券的组件要封装，公司做前端的好像对CSS都不是很熟(其实就是一群Javaer兼职干前端)，估计是用多了React、Bootstrap这种现成的框架(就只知道写组件了)，没写过啥基础的CSS。然后有个优惠券的模块分到了我的头上，正好总结总结。

优惠券最主要就是这个锯齿的问题。其实用图片做也完全可以，反正最后那些小图片都会被webpack编码成Base64的DataURL

关于DataURL的内容可以参考RFC2397

不过用图片方式就没有啥挑战性了，那我也没必要写这篇文章记录这个过程。

我们的目的是用纯CSS实现锯齿

一、使用before和after伪元素的border实现

先看一张效果图

先定义一下最基本的html：

这里我们主要关注怎么实现锯齿，内容什么的我就没写，背景颜色也直接放在html里面了。

<div class="sawtooth" style="background:#e24141;width:400px;height:170px;"></div>

1. 用dotted圆点边框覆盖div

我们的主要思路就是用两排圆点覆盖在div上：

.sawtooth {
    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
    position: relative;
}

.sawtooth:before, .sawtooth:after {
    content: ' ';
    width: 0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 0;
}

.sawtooth:before {
    /* 圆点型的border */
    border-right: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    left: -5px;
}

.sawtooth:after {
    /* 圆点型的border */
    border-left: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    right: -5px;
}

得到下面这样的效果：

2. 微调边框位置

但是由于圆点是顶着div开始的，总感觉不怎么好看，我们把before和after两个伪元素往下移动一点：

.sawtooth:before, .sawtooth