css - 使用 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);
}