飛人的影子與CSS3

Question

我想知道，是否有一種方式來創建下面的圖像陰影臨客（可能使用僞類？）

背後灰色框，紅色位意思是蔭飛人形狀，沒有模糊。

現在想想它是否可能？

非常感謝您的幫助。

Answer 1

DEMO 1:

HTML：

<figure></figure> 

CSS：

figure{ 
     width:150px; 
     height:150px; 
     margin:50px auto; 
     background:#ccc; 
     position:relative; 
     box-shadow: 0 14px 0 -10px red; 
    } 
    figure:before, figure:after{ 
     content:''; 
     position:absolute; 
     top: 2px; 
     width:0; 
     height:0; 
    } 

    figure:before{ 
     left: -5px; 
     border-left: 5px solid transparent; 
     border-right: 0px solid transparent; 
     border-top: 77px solid red; 
    } 

    figure:after{ 
     right: -5px; 
     border-left: 0px solid transparent; 
     border-right: 5px solid transparent; 
     border-top: 77px solid red; 
    } 

DEMO 2

figure{ 
    width:150px; 
    height:150px; 
    margin:50px auto; 
    background:#ccc; 
    position:relative; 
    box-shadow: 0 12px 0 -10px red; 
} 
figure:before{ 
    content:''; 
    position:absolute; 
    top: -10px; 
    left: 0; 
    width:100%; 
    height:100%; 
    background:red; 
    z-index: -1; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: perspective(800) rotateX(-40deg); 
} 

Answer 2

只需使用CSS3特性的情況下，可以通過一個僞元素和位置上施加transform創建飛人的框後面如下：

EXAMPLE HERE

.box { 
    width: 200px;  /* Optional */ 
    /* height: 150px; */ /* Optional */ 
    position: relative; 
} 

.box:before { 
    content: ""; 
    position: absolute; 
    background-color: lightgray; 

    top: -3%; bottom: -12%; left: 0; right: 0; 
    transform: perspective(50em) rotateX(-30deg); 
    z-index: -1; 
} 

因此陰影盒的尺寸將相對於盒子。但是，IE 9及以下版本不支持它。