如何在HTML/CSS中为SVG图形的对角线添加阴影效果

现有如下SVG代码，用于实现斜角分隔区块：

<svg style="height: 28px; background-color: 'blue'; " viewBox="0 0 436 217" 
      preserveAspectRatio="none" class="Tagline-triangle" fill="#EAEAEA" xmlns="http://www.w3.org/2000/svg">

  <path d="M0 0H436V217L0 0Z"></path>

</svg>

代码渲染效果如下：

需要实现的效果：在蓝色背景与浅灰色三角形相接的对角线位置添加阴影，强化两个色块的分层立体感。

注意：不要直接给三角形元素加CSS box-shadow 或者全局SVG feDropShadow，这类阴影会作用在三角形的所有边缘，上沿、右沿产生的多余阴影需要额外裁剪，实现繁琐。单独为斜边绘制阴影层的方案可控性最高，参数调整也更方便。

具体实现步骤：

• 首先修正原有代码的语法问题：原style中background-color: 'blue'的属性值多了嵌套单引号，部分浏览器无法正常识别，需要去掉多余引号
• 在SVG的<defs>标签内定义高斯模糊滤镜，用于生成斜边的柔化阴影
• 先绘制与对角线完全重合的深色线段，应用模糊滤镜作为阴影层
• 最后绘制原有的浅灰色三角形，盖在阴影层上方，只会露出斜边位置的阴影，不会出现多余边缘阴影

完整可直接运行的代码如下：

<svg style="height: 28px; background-color: blue;" viewBox="0 0 436 217" 
      preserveAspectRatio="none" class="Tagline-triangle" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 斜边阴影专用高斯模糊滤镜 -->
    <filter id="diagonalShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
    </filter>
  </defs>
  <!-- 阴影层：和斜边完全重合的深色线段，模糊后作为衔接处阴影 -->
  <path d="M0 0L436 217" stroke="#222" stroke-width="6" stroke-opacity="0.25" filter="url(#diagonalShadow)" />
  <!-- 原有浅灰色三角形，覆盖在阴影层上方 -->
  <path d="M0 0H436V217L0 0Z" fill="#EAEAEA"></path>
</svg>

你可以根据实际显示需求调整对应参数：

• 修改stdDeviation的值可以调整阴影的柔和度，数值越大阴影越弥散
• 修改stroke-opacity可以调整阴影的深浅，数值越高阴影越明显
• 修改stroke-width可以调整阴影的覆盖宽度
• 修改stroke的色值可以改变阴影的色调，适配不同的页面配色

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