CSS: Shading of "triangle" created using ::after

Question

I created a box by css and created a "triangle" using ::after to give that effect of the top bigger than the bottom, just to improve the same aesthetics..

I simplified the code to study character:

#btn{
font-size: 16px;
color: white;
background-color: black;
padding: 6px 12px;
width: 150px;
height: 36px;
}


#btn::after{
content: '';
margin-top:-6px;
border-right: 40px solid transparent;
border-top: 36px solid  #7e9ee4;
position: absolute;
left: 100%;
}

Perfect, it works 100%

Now I wanted to implement, use the box-shadow in #btn, this doing the normal shadow, as the function was made.
But when I try to put the shadow in the "triangle" the leftover will always be in the square where this false triangle was made,:

Without using a png background there is a way to make this color that in the code is like 'black' jugar a leftover to the 'Transparent' or this really is not possible to be done via CSS?

To illustrate, follow the 3 situations:

first: no shadows

second: shadow only in #btn

third: shadow in #btn::after

Answer 1

You can use the filter drop-shadow, that unlike the property box-shadow, which creates a rectangular shadow behind the cashier of the element, creates a shadow behind the form of the object.

Learn more at documentation.

Thus:

#btn {
  position: relative;
  font-size: 16px;
  color: white;
  background-color: black;
  padding: 6px 12px;
  height: 36px;
  
  /* Box-shadow aqui: */
  box-shadow: 3px 3px 5px red;
}

#btn::after {
  content: '';
  border: solid 15px transparent;
  border-left-color: black;
  position: absolute;
  top: 0;
  left: 100%;

  /* Filter com drop-shadow aqui: */
  filter: drop-shadow(3px 2px 2px red);
}

<span id="btn">Oi</span>

Note that in the first example, we use the property box-shadow normally. In the second, the filter to the effect drop-shadow.