CSS kullanarak bir yazılım kutusunun arka plan gölgesini oluşturmanın bir yolu var mı?

Question

aşağıdaki gibi bir yazılım kutusu düşünün:

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

Şimdi gölge yoktur düşünün. Arka plan gölgesini simüle edebilecek bir CSS yolu var mı, IE9 ve üstü olmasa bile en azından Firefox ve Chrome'da çalışabiliyor muyum?

Answer 1

bir yolu, bir doğrusal gradyanı ve görüntü arkasında pozisyon ekleyin Bu

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

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

see example

gibi bir üçgen şekli ile başlamak olacaktır. Bu gradient generator'a bir başlangıç ​​noktası olarak bakın.

Sonra transform'u hafifçe eğmek için kullanabilirsiniz.