Box Shadow effect Just on Top Left and Top Right - css

Question

i was trying to set div's shadow, to just top left and Top right but it is not working by just changing the degree of angel...
the fiddle is here
http://jsfiddle.net/2nmgB/
what i got is
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect4
{
position: relative;
}
.effect4:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
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);
}
<div class="box effect4">
<h3>Effect 4</h3>
</div>

Answer 1

well if you turn every value (positioning/box-shadow/rotation) to the opposite you get a result with the shadow at the top:
http://jsfiddle.net/2nmgB/2/
change
top: 80%;
bottom: 15px;
box-shadow: 0 15px 10px #777;
transform: rotate(3deg);
to
top: 15px;
bottom: 80%;
box-shadow: 0 -15px 10px #777;
transform: rotate(-3deg);
Update:
As mentioned in comments you want it right AND left:
Just add a second pseudo-element (::before) and place it accordingly:
http://jsfiddle.net/2nmgB/4/
right: auto;
left: 10px;
transform: rotate(-3deg);
Rest is the same as the ::after-element

Answer 2

Just use negative pixel offset instead.
EXAMPLE
div {
width: 150px;
height: 150px;
box-shadow: -5px -5px 5px gray;
border: 1px solid black;
}

Answer 3

JSFiddle link : http://jsfiddle.net/vinoddalvi/828fZ/1/
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect4
{
position: relative;
}
.effect4:after {
z-index: -1;
position: absolute;
content: "";
top: 20px;
left: 2px;
right: auto;
width: 30%;
height: 50%;
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(85deg);
-moz-transform: rotate(85deg);
-o-transform: rotate(85deg);
-ms-transform: rotate(85deg);
transform: rotate(85deg);
}
.effect4:before
{
z-index: -1;
position: absolute;
content: "";
top: 20px;
right: 2px;
left: auto;
height:50%;
width: 30%;
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(95deg);
-moz-transform: rotate(95deg);
-o-transform: rotate(95deg);
-ms-transform: rotate(95deg);
transform: rotate(95deg);
}
<div class="box effect4">
<h3>Effect 4</h3>
</div>

Answer 4

Try this code and change class names accordingly
<div class="class_box_shadow">Your code here <div class="sh_top_left"></div><div class="sh_bottom_right"></div></div>
your css style
.class_box_shadow{
width: 374px;
min-width: 200px;
min-height: 130px;
margin: auto;
background: #ccc;
border: 5px solid white;
position:relative;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.sh_top_left{
width:150px; height: 80px;
position:absolute;
left: 0; top:0;
z-index:-2;
background: rgba(0, 0, 0, 0.2);
box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
-moz-box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
-webkit-box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
-webkit-transform:skew(10deg,10deg) translate(45px,20px);
transform:skew(10deg,10deg) translate(45px,20px);
-moz-transform:skew(10deg,10deg) translate(45px,20px);
}
.sh_bottom_right{
content: "";
position:absolute;
right: 0; bottom:0;
width:150px; height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
-webkit-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
-moz-transform:skew(10deg,10deg) translate(-45px,-15px);
-webkit-transform:skew(10deg,10deg) translate(-45px,-15px);
transform:skew(10deg,10deg) translate(-45px,-15px);
}
you can visit this site to create your own custom drop shadows.
http://www.themeshock.com/css-drop-shadow/