Web サイトを開発していますが、問題は、ブラウザーのサイズを (水平方向に) 変更すると、メニューからの HOME リンクが壊れてしまうことです。何が起こるかを言葉で説明するのは難しいので、http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html で確認してください。
灰色の背景はイメージで、右上隅がカットされています。その領域を切り取った後、その領域を透明にしました。つまり、透明な背景の台形です。
私の質問は、サイズ変更時に台形が長方形に変換されるのを防ぐにはどうすればよいですか?
そんなものが欲しいなら。
ひし形が 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;
}
画像を使用する代わりに、必要な形状をファイル内で直接作成します。このリンクを試してください：