有没有精通css的前端大佬捞我一下

前端小白
想要用css 实现这样的一个效果

自己只能做到这种效果
麻烦各位大佬帮我出谋划策如何修改或者 编写一下

贴一下我写的代码
.div1{
width: 1900px;
height: 915px;
background: #2292DD;
clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
background-repeat: no-repeat;

    }

.triangles {
width: 1900px;
height: 900px;
background-color:#0099ff;

filter: blur(100px);

-webkit-clip-path: polygon(50px 100px,350px 100px,450px 200px,1450px 200px,1550px 100px,1850px 100px,1850px 850px,50px 850px);
clip-path: polygon(50px 100px,350px 100px,450px 200px,1450px 200px,1550px 100px,1850px 100px,1850px 850px,50px 850px);

}

         <div class="div1">

            <div class="triangles"></div>


         </div>
    </body>

https://www.zhihu.com/question/371534163/answer/1016424848

可以里面写个div，然后用阴影来，或者ui直接出图