CSS——优惠券锯齿图案

思路：使用border的点样式来完成，给每个点设置宽度，背景色为白色，就可以达到锯齿的效果

<div class="box"></div>

    .box{
              position: relative;
              width: 300px;
              height: 150px;
              text-align: center;
              background-color: lightblue;
            }
            .box:before,.box:after{
              content: '';
              width: 10px; // 设置为0的话最佳
              height: 150px;
              position: absolute;
            }
            .box:before{
              border-right: 20px dotted white;
              left: -10px;
            }
            .box:after{
              border-left: 20px dotted white;
              right: -10px;
            }
        </style>

 

预览效果：

 2020/04/08 周三