你会如何编码：网格破碎的形状

Question

我是一个从榜样中学到最好的人。目前，在开发桌面应用程序十五年后，我正在进入Web开发领域。我仍然习惯于用于开发现代网站的所有网络技术以及我看到的任何地方，我看到很酷的小UI元素并质疑它们是如何实现的。所以我想我会问你，网络专家...... wexperts：）

您可以使用一些直接或创造性的方法来编写这个打破网格的箭头......

此页面的基本布局如下......

1. html / css代码是什么样的？
2. 您是将图像分割成多个图像还是使用单个图像？

我确信这是一个非常简单的概念，它让我很难过。如果这是一个奇怪的问题，我很抱歉，记住我是个菜鸟！ ：）

提前感谢您的帮助！

这是原始教程link，我找到了这些图片

Answer 1

如果你看看你的模型，标题面板包括从绿色框顶部到框底部的高度。

background: green url(images/header-bottom.jpg) no-repeat bottom left;

该jpg文件包括最后70个像素的高度，包括整个箭头。由于您的标题和导航位于箭头所在的位置，因此容器将完全按照您显示的方式显示。

这也使您可以让子菜单和内容只有背景颜色，因为您在这两个区域中看到的唯一渐变与标题面板中的箭头位于同一区域。

Answer 2

你可以制作一个宽而短的矩形图像来处理它。使用与页面其余部分相同的颜色，使其混合。在所有浏览器中检查它，以确保图像呈现与html颜色相同。对于某些图像格式，至少在某些浏览器中并非如此。

Answer 3

有很多方法可以做到这一点......有两种或三种方法比大多数都好。

这是Ballsacian和肖恩正在谈论的形象。忽略底部文本顶部的黑色部分，我不熟悉的截图。

alt text http://img171.imageshack.us/img171/9392/picture6e.png

你可以使箭头的绿色部分透明并保存为gif或png，因为斜率似乎是45度（GIF中没有锯齿）。如果您更改了图像，您仍然需要编辑图像以匹配子图像和内容背景颜色，但透明三角形将自动显示标题背景颜色。

您还必须删除标题，子空间和内容容器之间的边距。

制作这个的Photoshop人显然希望通过在标题和subnav / content之间设置边距来“自然地”显示背景，但如果没有带箭头的非语义标记，这是不可能的。你甚至不使用CSS就能做到这一点的方法就是将图像放在标题之后，标题和子标题/内容之间。

<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />

然后使线条透明而不是箭头。现在，如果您更改了标题，子空间或内容背景颜色，而不是身体背景颜色，则必须更改图像。这实现了Photoshop人在精神上所需要的东西，但最终并不是那么令人满意的标记。

我可以看到这个概念在photoshop中非常棒，你只需要改变每个部分的背景颜色，透明度就可以完成其余部分，很酷！如果你对如何做到这一点感到困惑并保持Photoshop人的概念真实，我不怪你。使用图像的基本HTML和CSS是不可能的。也许使用SVG你可以做到。

为了好玩，这里有超级优化的精灵方式。这需要您在箭头和内容顶部渐变之间放置一个巨大的垂直透明空间。然后在subnav的UL和内容容器的div /部分上使用此背景。将background-position设置为0 - （verticalspace + arrowheight）并将repeat-x设置为内容。 3k单个http请求。

alt text http://img37.imageshack.us/img37/8503/arrowy.gif