CSS3 - Verticle斜角80％的外箱陰影

Question

我知道如何使一箱的影子跑下來一個元素然而是有可能有它向下延伸80％的元素，而不是元素的整個高度的？

而且如何讓陰影角度出來（這是東西IM與大多數掙扎）

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和半徑邊境它，然後把它實際股利背後...

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

希望它可以幫助