CSSを使用してソフトウェアボックスのバックグラウンドシャドウを作成する方法はありますか？

Question

は、次のようなソフトウェアのボックスを想像してみて：

http://www.sitellite.org/pix/sitellite-box.gif

今影がない想像してみてください。私はそのバックグラウンドシャドウをシミュレートできるCSSの方法はありますか？IE9以上でなければ、少なくともFirefoxとChromeで動作しますか？

Answer 1

一つの方法は、線形勾配及び画像の背後の位置に追加この

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

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

see example

ような三角形の形状で開始するであろう。このgradient generatorを出発点としてご覧ください。

次に、transformを使用して少し歪ませることができます。