Slanted box shadow on left and right side - css

Question

I am trying to make slanted box shadow on both sides of a div, which I have added here as an image.
The red part is indicating here shadow. actually color is not solid, it should gradually decrease when it is moving to outside from border.

Answer 1

Here is my contribution hope it gives you a baseline.
.box {
width: 150px;
height: 200px;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background-color: white;
border: 2px solid black;
width: 100%;
height: 100%;
position: relative;
}
.box::before {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-right: 25px solid red;
position: absolute;
left: 0;
bottom: 0;
}
.box::after {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-left: 25px solid red;
position: absolute;
right: -4px;
bottom: 0;
}
<div class="box">
<div class="box-content">
Box
</div>
</div>

Answer 2

Try this:
div{
width: 200px;
height: 200px;
border:1px solid black;
background: white;
}
div:before{
content:' ';
display:block;
width: 200px;
height:200px;
background: linear-gradient(transparent, black);
position: fixed;
transform: matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1); z-index: -1;
}
<div>Hello</div>

Answer 3

Using transform: skew() applied to the div's before and after
jsFiddle 1
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background-color: red;
transform: skew(5deg, 0);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
EDIT : to give the shadow effect some real blur with gradient and transparency, we could make use of linear-gradient background with two rgba() values, as well as CSS blur() (1) filter.
jsFiddle 2
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
transform: skew(5deg, 0);
filter: blur(2px);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
Notes:
(1) browser support for CSS filter