body{background-color:#fff;margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100vh}.container{position:relative;background-color:#caa472;width:360px;padding:16px;border-radius:12px}.container .box-container{display:flex;flex-wrap:wrap;margin:0 auto}.container .box{flex:1 1 25%;background:#e9d2ff;background-repeat:no-repeat;background-position:50%;background-size:cover;position:relative}.container .box.box-0{background:#2ab6fb}.container .box.box-1{background:#efefef}.container .box.box-2{background:#2ab6fb;position:relative}.container .box.box-2 .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:#efefef;border-radius:50%}.container .box.box-3{background:#efefef}.container .box.box-3 .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:#2ab6fb;border-radius:50%}.container .box.box-4{position:relative;background:#efefef}.container .box.box-4 .triangle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-top:90px solid #2ab6fb;border-right:90px solid transparent}.container .box.box-5{position:relative;background:#efefef}.container .box.box-5 .triangle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-top:90px solid #2ab6fb;border-left:90px solid transparent}.container .box.box-6{position:relative;background:#efefef}.container .box.box-6 .triangle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-bottom:90px solid #2ab6fb;border-right:90px solid transparent}.container .box.box-7{position:relative;background:#efefef}.container .box.box-7 .triangle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-bottom:90px solid #2ab6fb;border-left:90px solid transparent}.container .box:after{content:"";display:block;padding-bottom:100%}