css - 有没有办法使用 CSS 创建软件框的背景阴影？

Question

想象一个像下面这样的软件盒：

_{（来源：sitellite.org）}

现在想象阴影不存在。有没有一种 CSS 方法可以模拟该背景阴影，并且至少可以在 Firefox 和 Chrome 上工作，如果不是 IE9 及更高版本的话？

Answer 1

一种方法是从这样的三角形开始

<div id="triangle"></div>

#triangle {
    width: 0;
    height: 0;
    border-top: 100px solid grey;
    border-left: 100px solid transparent;
    opacity:0.1;
}​

看例子

然后添加一个线性渐变并将其放置在图像后面。以这个梯度生成器为起点。

然后你可以使用transform稍微倾斜它。