<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        #grad1 {
            background-color: orange;
            height: 33px;
            -webkit-clip-path: inset( 0% 40% 0% 40%);
        }
        #grad2 {
            background-color: green;
            height: 33px;
            -webkit-clip-path: inset( 0% 40% 0% 40%);
        }
        #grad3 {
            background-color: blue;
            height: 68px;
            -webkit-clip-path: inset( 0% 40% 0% 40%);
        }
        #grad4 {
            background-color: green;
            height: 33px;
            -webkit-clip-path: inset( 0% 40% 0% 40%);
        }
        #grad5 {
            background-color: orange;
            height: 33px;
            -webkit-clip-path: inset( 0% 40% 0% 40%);
        }
        .box {
            position: absolute;
            background-color:black;
        }
        #box1 {
            -webkit-clip-path: inset( 30% 40% 60% 40%);
        }
        #box2 {
            -webkit-clip-path: inset( 60% 40% 30% 40%);
        }
        #box3 {
            -webkit-clip-path: inset( 10% 40% 80% 40%);
        }
        #box4 {
            -webkit-clip-path: inset( 80% 40% 10% 40%);
        }
    </style>
</head>
<body>
    <div style="position: absolute">
        <div id="grad1"></div>
        <div id="grad2"></div>
        <div id="grad3"></div>
        <div id="grad4"></div>
        <div id="grad5"></div>
    </div>
    <div style="position: absolute">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
        <div id="box4" class="box"></div>
    </div>
</body>
</html>