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 函數調整位置，使其貼合在一起。

代碼中的值可以根據設計要求適當調整，如優惠券的大小和顏色等。