Is it possible to create this shadow in CSS?

Question

How can I create the next double corner shadow in CSS? Is it possible?

Answer 1

Use the following HTML:

<div class="box"></div>​ 

and the following CSS:

 .box { width:70%; height:200px; margin:40px auto; position: relative; background-color: red; } .box:before, .box:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .box:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }​ 

See this live example.

Answer 2

Yes: http://matthamm.com/box-shadow-curl.html

Also: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Answer 3

You can put two divs behind the padded box and the box shadow. Then turn each bit. I would probably do this with the image, although it seems to be cleaner.

Answer 4

Yes, possibly with the pseudo-elements before and after .

You position the two absolutely, you rotate them, say, 5deg (in fact, one with 5 and the other with -5), you give them each box-shadow , and you adjust the propagation value so that the shadow is smaller than the box itself. And you set the z-index so that they appear behind your div.

demo link http://dabblet.com/gist/2789364

relevant piece of code

 .box:before, .box:after { bottom: 0; min-height: 45%; width: 65%; border-radius: 3px; box-shadow: 0 0 10px rgba(204,204,204,.4); position: absolute; z-index: -1; background: rgba(204,204,204,.4); content: ''; } .box:before { left: 5px; transform: rotate(-5deg); } .box:after { right: 5px; transform: rotate(5deg); }