css - CSS を使用してソフトウェア ボックスの背景の影を作成する方法はありますか?

Question

次のようなソフトウェア ボックスを想像してください。

_{(出典: sitellite.org )}

影がそこにないことを想像してください。その背景の影をシミュレートし、IE9以降ではないにしても、少なくともFirefoxとChromeで動作するCSSの方法はありますか?

Answer 1

1つの方法は、このような三角形から始めることです。

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

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

例を参照してください

次に、線形グラデーションを追加し、画像の後ろに配置します。このグラデーションジェネレーターを出発点として見てください。

次に、変換を使用してわずかに歪めることができます。