如何用CSS实现与指定图片背景相似的复杂渐变效果？

需要创建一个符合以下特征的背景元素（忽略原图片中的篮球场）：

• 灰色斜线
• 主灰色斜线之间的细灰色斜线
• 与主斜线垂直的短斜线标记（遵循简单规律）
• 主灰色斜线带有box-shadow，越靠近元素右下角越明显
• 整体背景从下到上逐渐变浅

目前已实现基础的重复线性渐变背景，代码如下：

.gradient {
  width: 350px;
  height: 200px;
  background: repeating-linear-gradient(
    135deg,
    #DADADA,
    #DADADA 2px,
    white 2px,
    white 15px
  )
}

<div class="gradient">
  Close but not really all that close
</div>

更倾向于用CSS实现大部分效果，理论上可以用SVG绘制，请问仅用CSS是否可行？

完全可以用CSS实现所有要求的效果，以下是具体实现思路和代码：

核心实现思路 #

1. 主斜线+细斜线：叠加两层repeating-linear-gradient，分别控制主斜线（宽2px、间隔15px）和细斜线（宽1px、间隔3px）的样式，让细斜线填充主斜线之间的空隙。
2. 垂直短斜线标记：添加一组与主斜线（135°）垂直方向（45°）的重复渐变，通过调整渐变的颜色区间，生成规律分布的短斜线标记。
3. 右下角增强阴影：用从左上到右下的线性渐变，模拟阴影随位置逐渐增强的效果，颜色从透明过渡到浅灰。
4. 背景从上到下变浅：叠加垂直方向的线性渐变，让底部颜色稍深、顶部完全透明，实现整体渐变效果。

完整代码示例 #

.background-element {
  width: 350px;
  height: 200px;
  background-color: #fff;
  background-image: 
    /* 主灰色斜线 */
    repeating-linear-gradient(135deg, #dadada 0 2px, transparent 2px 15px),
    /* 主斜线间的细灰色斜线 */
    repeating-linear-gradient(135deg, #eaeaea 0 1px, transparent 1px 3px),
    /* 与主斜线垂直的短斜线标记 */
    repeating-linear-gradient(45deg, transparent 0 12px, #dadada 12px 13px, transparent 13px 15px),
    /* 整体背景从下到上变浅 */
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(248,248,248,1) 100%),
    /* 右下角阴影增强效果 */
    linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
}

<div class="background-element"></div>

调整说明 #

可以通过修改渐变的角度、颜色值、间隔参数，精准匹配目标背景的视觉效果；如果短斜线的规律更复杂，可结合background-position多组定位，或用mask属性进一步控制显示区域。

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