giving border-right a box shadow

Question

I am trying to give the border of a triangle that I made with css a box shadow.

#triangle-topleft {
	  width: 0;
	  height: 0;
	  border-top: 300px solid blue;
	  border-right: 100px solid transparent;
  }

<div id="triangle-topleft" />

I tried but can't give the right border a shadow. Is there an easy css way to accomplish this? That's how it should look like in the end (just better with an actual shadow).

Answer 1

You could use the filter css rule.

#triangle-topleft {
      width: 0;
      height: 0;
      border-top: 300px solid blue;
      border-right: 100px solid transparent;
      filter: drop-shadow(3px 3px 3px hsla(0, 0%, 0%, 1));
  }

<div id="triangle-topleft" />