用css画一个斜线网格（笔记）

偶遇一个小需求，一般图片蒙层的网格都是普通的网格，但是需要做一个斜着的网格。

<div class="test"></div>

 html,
        body {
            width: 100%;
            height: 100%;
        }

        .test {
            width: 100%;
            height: 100%;
            background:
                radial-gradient(black 0, transparent 0),
                radial-gradient(black 0, transparent 0),
                linear-gradient(#fff 3px, transparent 0),
                linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
                linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
                #fff;
            background-size: 109px 109px, 109px 109px, 100% 6px;
        }

长这个样子

修改radial-gradient对应px值，和background-size中同顺序的px值，可以修改线的粗细，大小，甚至可以交点突出