html - 网页大小调整中断菜单项

Question

我正在开发一个网站，问题是当我调整浏览器的大小（水平）时，我的菜单中的 HOME 链接被破坏了。很难用语言解释会发生什么，所以在这里查看：http ://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html 。

灰色背景是一个图像，有一个右上角的切角。切割该区域后，我使该区域透明。所以，它是透明背景上的梯形。

我的问题是：如何防止梯形在调整大小时变成矩形？

Answer 1

不要使用图像，而是在文件中创建您想要的形状。试试这个链接：

使用区域形状属性

Answer 2

如果你想要这样的东西。

如果钻石位于两个选项卡之间，那么您应该为您的 li 元素（全部）指定特定的宽度。不要为此使用百分比。像这样

 .menu > li#home {
 display: inline;
 float: left;
 background: none;
 background-image: url(../img/home.png);
 width: 273px;   /* same as your image size */
 }

以及您的两个标题图像

img#logo {
position: absolute;
top: 10px;  /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}