Css 框阴影效果仅在左上角和右上角

我试着将div的阴影设置为左上角和右上角，但仅仅改变天使的度数是行不通的

小提琴在这儿

我得到的是

.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>

.box h3{
文本对齐：居中；
位置：相对位置；
顶部：80px；
}
.盒子{
宽度：70%；
高度：200px；
背景：#FFF；
利润率：40px自动；
}
.4
{
位置：相对位置；
}
.4：之后
{
z指数：-1；
位置：绝对位置；
内容：“；
底部：15px；
右：10px；
左：自动；
宽度：50%；
最高：80%；
最大宽度：300px；
背景：#777；
-网络工具包盒阴影：0 15px 10px#777；
-moz盒阴影：0 15px 10px#777；
盒影：0 15px 10px#777；
-webkit变换：旋转（3deg）；
-moz变换：旋转（3deg）；
-o变换：旋转（3deg）；
-ms变换：旋转（3deg）；
变换：旋转（3deg）；
}
效果4

只需使用负像素偏移即可

---

如果将每个值（定位/框阴影/旋转）都反转，则会得到顶部阴影的结果：

改变

top: 80%;
bottom: 15px;
box-shadow: 0 15px 10px #777;
transform: rotate(3deg);

到

更新：

如评论中所述，您希望它向右和向左：

只需添加第二个伪元素（

：：在

之前），并相应地放置它：

Rest与

：：在
-element
jsiddle链接之后：

.box h3{
文本对齐：居中；
位置：相对位置；
顶部：80px；
}
.盒子{
宽度：70%；
高度：200px；
背景：#FFF；
利润率：40px自动；
}
.4
{
位置：相对位置；
}
.4：之后{
z指数：-1；
位置：绝对位置；
内容：“；
顶部：20px；
左：2px；
右：自动；
宽度：30%；
身高：50%；
最大宽度：300px；
背景：#777；
-网络工具包盒阴影：0 15px 10px#777；
-moz盒阴影：0 15px 10px#777；
盒影：0 15px 10px#777；
-webkit变换：旋转（85度）；
-moz变换：旋转（85度）；
-o变换：旋转（85度）；
-ms变换：旋转（85度）；
变换：旋转（85度）；
}
.4:之前
{
z指数：-1；
位置：绝对位置；
内容：“；
顶部：20px；
右：2px；
左：自动；
身高：50%；
宽度：30%；
最大宽度：300px；
背景：#777；
-网络工具包盒阴影：0-15px 10px#777；
-moz盒阴影：0-15px 10px#777；
盒影：0-15px 10px#777；
-webkit变换：旋转（95度）；
-moz变换：旋转（95度）；
-o变换：旋转（95度）；
-ms变换：旋转（95度）；
变换：旋转（95度）；
}
效果4
尝试此代码并相应更改类名

<div class="class_box_shadow">Your code here <div class="sh_top_left"></div><div class="sh_bottom_right"></div></div> 

您可以访问此网站创建自己的自定义放置阴影。
@JunaidFarooq:您想在显示的DIV的左上方和右上方显示它吗？是的。比如-->| | | | |复选框的链接和阴影please@JunaidFarooq：我已更新代码，将其显示在右上角和左上角。您检查了我的答案吗？应该解决你的问题，如果是这样，请接受它，使其在IE上可见，以及使用这行代码边框折叠：分开；
top: 15px;
bottom: 80%;
box-shadow: 0 -15px 10px #777;
transform: rotate(-3deg);

right: auto;
left: 10px;
transform: rotate(-3deg);

.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>

<div class="class_box_shadow">Your code here <div class="sh_top_left"></div><div class="sh_bottom_right"></div></div> 

.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);
}