css鋸齒布局

這種樣式直接使用圖片來處理不是更簡單嗎，用css3有點(diǎn)求虐了吧

    body{
                background-color: #EDF1F7;
            }
       .box {
           width: 387px;
           height: 180px;
           padding: 10px 0;
           position: relative;
           overflow: hidden;
           border-radius: 8px;
           background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #FFF 5px);
           background-size: 18px 15px;
           background-position: 4px -4px;
        }
       .box:before {
           content: '';
           position: absolute;
           right:0;
           left:0;
           top:10px;
           bottom:10px;
           z-index: -1;
           background-color:#FFF;
        }
       .box:after {
           content: '';
           position: absolute;
           left: 10px;
           top: 10px;
           right: 10px;
           bottom: 10px;
           box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
           z-index: -2;
        }
        
          <div class="box">
                   
            </div>