<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #back {
                width: 700px;
                height: 500px;
                background-color: green;
            }
            #front {
                width: 500px;
                height: 300px;
                background-color: red;
                border: 50px solid blue;
                padding: 50px;
            }
        </style>
        <script>
            var sizeX = 151, sizeY = 128, spaceX = 32, spaceY = 58, width = 700, height = 500;

            var urls = Array(), size = Array(), position = Array();

            function addMasks() {
                for (var x = 0; x < width; x += sizeX + spaceX) {
                    for (var y = 0; y < height; y += sizeY + spaceY) {
                        urls.push("linear-gradient(45deg, black, transparent 100%)");
                        size.push(sizeX + "px " + sizeY + "px");
                        position.push(x + "px " + y + "px");
                    }
                }

                div = document.getElementById("front");

                div.style.cssText += "-webkit-mask-image: " + urls.join(", ") + ";" +
                                     "-webkit-mask-size: " + size.join(", ")  + ";" +
                                     "-webkit-mask-position: " + position.join(", ") + ";" +
                                     "-webkit-mask-repeat: no-repeat;" +
                                     "-webkit-mask-origin: border-box;" +
                                     "-webkit-mask-clip: border-box;";
           }
       </script>
    </head>

    <body onload="addMasks()">
        <div id="back">
            <div id="front" />
        </div>
    </body>
</html>