如何对齐具有对角边缘的div背景图像？

问题描述：

好的，所以我必须创建一个具有对角背景图像的菜单栏。如何对齐具有对角边缘的div背景图像？

我试过所有的东西，但divs是矩形的，并不能很好地工作。

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

enter code here

现在，只是忽略未对齐的文本，我会处理这后来:)

我想知道我能做些什么来使对角线图像并排安装，甚至有可能吗？

我只有与设计和层层.PSD，现在我必须将它转换为HTML/CSS

将对角线图像放在一个图像中并加载作为父div的背景，然后将它们的父div上的对角线图像排列为子div的文本会更容易吗？ – Binvention

为什么你需要这些图像呢，你可以用CSS来做到这一切。 – magreenberg

我怎样才能使用CSS？那将是真棒 –

答

切缘阴性！

这让它看起来恰到好处。 :)

#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; 
}

如何对齐具有对角边缘的div背景图像？

相关推荐