如何用HTML和CSS创建带反向45°重复线条渐变的矩形div

你当前已通过-45deg角度的repeating-linear-gradient实现了一个方向的斜线条渐变，要得到反向的同效果线条，只需要修改渐变角度即可：

单反向线条实现 #

将渐变角度从-45deg改为45deg，就能生成反向的45°斜线条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反向45°渐变线条</title>
    <style>
        .repeating-linear-reverse {
            background: repeating-linear-gradient(
                45deg,
                black 4px,
                transparent 4px,
                transparent 10px
            );
        }
    </style>
</head>
<body>
    <div class="repeating-linear-reverse" style="width: 200px;height: 50px; border: 1px solid red;">
    </div>
</body>
</html>

额外：双向交叉线条实现 #

如果需要同时展示两个方向的线条，可以通过叠加两个渐变背景实现，用逗号分隔多个渐变规则：

.both-directions {
    background: 
        repeating-linear-gradient(
            -45deg,
            black 4px,
            transparent 4px,
            transparent 10px
        ),
        repeating-linear-gradient(
            45deg,
            black 4px,
            transparent 4px,
            transparent 10px
        );
}

将该类名应用到目标div上，即可得到交叉的双向45°线条效果。

你已实现的效果：

内容的提问来源于stack exchange，提问作者T. Joseph