Is it possible to create these shadows with CSS? - css

Question

Here is an image I created of a board with a shadow behind it. The board is supposed to be leaning against a wall so the shadow is in a triangular shape on both sides.
Is it possible to create a shadow like this using only CSS? Also, if possible, is the method cross-browser compatible?

Answer 1

Is it possible to create a shadow like this using only CSS?
Yes, using pseudoelements, box shadows, and 2D transformations – specifically, a rotation. An example is at the end of this answer.
Is the method cross-browser compatible?
Sort of. The ideal code isn't fully compatible with older versions of IE. To get that support, you'll need to make some compromises, which I'll list below:
Here's the support breakdown:
:before and :after – IE8+ only. For deeper support, you could replace these with less-semantic div elements.
rotation – IE6+ with IE-specific rules; a reference that shows these rules is in the note at the end of the example
box-shadow – IE9+ To make these shadow work in IE6+, you could use CSSPie.
Example of the ideal code
Here's a very quick example to get you started.
<div id="board">
Place image here!
</div>
CSS
#board {
position: absolute;
left: 50px;
top: 50px;
background: #e5e5e5;
text-align: center;
width: 100px;
height: 100px;
}
#board:before {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
left: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
}
#board:after {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
right: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
Where should I go from here?
You'll want to implement the syntax for rotations in early IEs, or use a Javascript library to add the support, both of which can be read about over here.
You might also want the shadows to cut off like they do in your image. This could be done by covering up the part of the shadow that sticks out with an element that's beneath it.
I also threw that together pretty quickly, so you might want to adjust it to get the shadows looking just like how you want them.