How to add shadow effect along diagonal of SVG in HTML/CSS?-CodePudding

I have a SVG defined in HTML like this:

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

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

</svg>

which ends up looking like this:

I want to add a shadow effect along the diagonal where the blue and red meet. How can I accomplish this?

CodePudding user response：

You can use filter: drop-shadow() on the triangle svg path. It's only not supported in IE11 and opera mini.

.shadow {
  filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));
}

<svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none"  fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path  d="M0 0H436V217L0 0Z"></path>
</svg>

You can do the drop shadow filter style inline on the path if you want.

<svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none"  fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0H436V217L0 0Z" style="filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));"></path>
</svg>