Question

好的，所以我必须创建一个具有对角背景图像的菜单栏。

我已经尝试了所有的东西，但是div是矩形的，效果不是很好。

以下是我必须达到的目标：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;
}

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

1 个答案: