左侧和右侧的阴影框阴影

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

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 2

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 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() ⁽¹⁾ 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:

⁽¹⁾ browser support for CSS filter