使用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及以下版本不支持它。