css给优惠券设置锯齿边框

效果：

 

 代码：

<!-- 优惠券 -->
<view class="couponbox1">
123
</view>

 

style：

.couponbox1 {
width: 96%;
background-color: #fff;
margin: 0 auto;
margin-top: 16rpx;
height: 260rpx;
position: relative;
}
.couponbox1::before {
content: ' ';
width: 0;
height: 0;
width: 100%;
position: absolute;
border-top: 6px dotted white;
left: 0;
top: -3px;
}
.couponbox1::after {
content: ' ';
width: 100%;
height: 0;
position: absolute;
border-bottom: 6px dotted white;
left: 0;
bottom: -3px;
}