CSS: Box Shadow Effect on Scalene Triangle PseudoElement - html

Question

I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>

Answer 1

What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

Answer 2

You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)