如何用CSS线性渐变实现带角度的网格背景？

你当前的代码只能生成水平和垂直的正网格，要实现目标中的斜向网格，需要调整渐变角度并修正背景尺寸，以下是修正后的代码：

.stripped {
  height: 500px;
  opacity: 0.8;
  background-color: rgb(161, 8, 8);
  background-image: 
    linear-gradient(45deg, #ababab 2px, transparent 2px),
    linear-gradient(135deg, #ababab 2px, transparent 2px);
  background-size: 141px 100px; /* 100px为网格间距，141是100×√2的近似值，保证斜网格均匀排列 */
}

核心修改说明： #

• 渐变方向改为45deg和135deg，对应斜网格的两条交叉方向
• 将红色背景色单独设置为background-color，避免原代码中第二个渐变的背景色重复定义导致的显示问题
• 调整background-size的水平参数：由于斜向渐变的循环周期是正方形的对角线长度，因此需要将水平尺寸设置为原间距的√2倍（约1.414倍），确保网格线均匀分布

如果需要调整网格间距，只需修改100px为目标间距，同时将141px按相同比例缩放即可（例如间距改为50px时，水平尺寸用71px）。

内容的提问来源于stack exchange，提问作者Rida Fatima