трапеция тень с 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 и ниже.