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

Question

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

我已经尝试了所有方法，但 div 是矩形的，效果不佳。

这是我必须达到的目标:http://imgur.com/OIQPhIC

这是我目前所拥有的:https://jsfiddle.net/z304mkoj/

enter code here

现在，忽略未对齐的文本，稍后我会处理:)

我想知道我该怎么做才能使对 Angular 线图像并排排列，这可能吗？

我只有带有设计和图层的 .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;
}