CSS3 - 垂直角度80％OUTER Box Shadow

Question

我知道如何让一个盒子阴影向下运行一个元素，但是它是否可以让它向下延伸80％的元素而不是元素的整个高度？

另外如何使阴影角度出来（这是我最挣扎的事情）

Answer 1

这样的东西？

jsFiddle here

有很多方法可以实现这一点。我只是设置了阴影，并叠加了一个三角形。

这是一种没有模糊阴影的替代方案。http://jsfiddle.net/bHEaZ/1/

HTML - 非常简单

<div></div>

<强> CSS

div {
    width: 100px;
    height: 200px;
    position: relative;
    border: 1px solid black;
    box-shadow: 20px -10px 30px black;
    margin: 40px;
}

div:after {
    position: absolute;
    left: 102px;
    top: 100px;
    content: "\A";
    width: 0;
    height: 0;
    border-bottom: 90px solid white;
    border-right: 50px solid white;
    border-top: 90px solid transparent;
}

Answer 2

你在寻找这样的东西吗？ http://fiddle.jshell.net/sijav/2S7Pv/1/
有很多方法可以做到，但我的方式是：
使用另一个div和radius边界然后将它放在实际div之后......

.origdiv{
    width:200px;
    height:200px;
    background: blue;
    z-index:10;
}
.shadowthis{
    left:150px;
    top:150px;
    position:absolute;
    box-shadow: 10px -10px 5px #888888;
    border-bottom-right-radius:25%;
    z-index:9;
}

希望有所帮助