如何对齐具有对角边缘的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; 
}