CSS 圆形锯齿布局该怎么写呢？

Question

请问这样的圆形锯齿布局该怎么写呢？

Answer 1

    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>

Answer 2

这种样式直接使用图片来处理不是更简单吗，用css3有点求虐了吧