如何對齊具有對角邊緣的div背景圖像？

Question

好的，所以我必須創建一個具有對角背景圖像的菜單欄。

我試過所有的東西，但divs是矩形的，並不能很好地工作。

這是我必須做到：http://imgur.com/OIQPhIC

，這是我到目前爲止有：https://jsfiddle.net/z304mkoj/

enter code here 

現在，只是忽略未對齊的文本，我會處理這後來:)

我想知道我能做些什麼來使對角線圖像並排安裝，甚至有可能嗎？

我只有與設計和層層.PSD，現在我必須將它轉換爲HTML/CSS

Answer 1

切緣陰性！

這讓它看起來恰到好處。 :)

#leftedgebutton 
{ 
    width: 180px; 
    height: 45px; 
} 

#leftbutton 
{ 
    /*left: 283px; 
    top: 0px; 
    position: absolute;*/ 
    width: 150px; 
    height: 45px; 
    margin-left: -50px; 
    margin-right: -30px; 
} 

#rightbutton 
{ 
    /*left: 867px; 
    top: 0; 
    position: absolute;*/ 
    width: 150px; 
    height: 45px; 
    margin-left: -30px; 
} 

#rightedgebutton 
{ 
    /*left: 986px; 
    top: 0; 
    position: absolute;*/ 
    width: 180px; 
    height: 45px; 
    margin-left: -50px; 
} 

#toplogoarea 
{ 
    /*left: 396px; 
    top: -12px; 
    position: absolute;*/ 
    width: 507px; 
    height: 191px; 
    z-index:190; 
} 

#dfgameslogo 
{ 
    /*left: 581px; 
    top: 58px; 
    position: absolute;*/ 
    width: 136px; 
    height: 127px; 
} 

#searchbar 
{ 
    width: 474px; 
    height: 45px; 
}