CSS3 - 垂直 Angular 80% 外部框阴影

Question

我知道如何使框阴影沿着元素向下延伸，但是是否可以让它向下延伸到元素的 80% 而不是元素的整个高度？

还有如何使阴影 Angular 变大(这是我最纠结的事情)

Answer 1

是这样的吗？

jsFiddle here

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

这是没有模糊阴影的替代方案.. 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;
}