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

Issue

I have a SVG defined in HTML like this:

<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>

which ends up looking like this: enter image description here

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

Solution

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" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path class="shadow" 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" class="Tagline-triangle" 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>

Answered By – WizardCoder

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published