CSS 的优惠券锯齿可以使网页的设计更加美观，增加用户的体验。下面介绍一些实现这个效果的代码。

.coupon {
position: relative;
width: 200px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
overflow: hidden;
}
.coupon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background-image: linear-gradient(135deg, #f00 25%, transparent 25%), linear-gradient(-135deg, #f00 25%, transparent 25%);
background-position: 0 0;
background-size: 40px 40px;
transform: translate(-10px, -10px);
}
.coupon::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background-image: linear-gradient(-45deg, #f00 25%, transparent 25%), linear-gradient(45deg, #f00 25%, transparent 25%);
background-position: 0 0;
background-size: 40px 40px;
transform: translate(10px, -10px);
}

以上代码实现了一个优惠券的锯齿效果。使用伪元素 before 和 after 分别创建两个锯齿形状，然后通过 linear-gradient 函数实现红色梯度色。通过 transform 函数调整位置，使其贴合在一起。

代码中的值可以根据设计要求适当调整，如优惠券的大小和颜色等。