我就是最好的學習從例如一個人。目前，在開發桌面應用程序十五年後，我正在進入Web開發領域。我仍然習慣於用於開發現代網站的所有網絡技術以及我所看到的任何地方，我看到很酷的小UI元素並質疑它們是如何實現的。所以，我想我會問你，網絡專家...的wexperts :)你會如何編寫這樣的：網破的形狀
有哪些直接的或創造性的方式，你可以編寫這個網破箭頭...
該頁面的基本佈局看起來像......
我敢肯定這是一個非常簡單的概念，它完全讓我難以置信。如果這是一個奇怪的問題，我很抱歉，請記住我是一個noob！ :)
在此先感謝您的幫助！
這裏有一個link原來的教程，我發現這些圖片
如果你看看你的樣機在頂部面板包括從綠盒子的頂部，盒子底部的高度。
background: green url(images/header-bottom.jpg) no-repeat bottom left;
那個jpg文件包括最後70個像素，包括整個箭頭。由於您的標題和導航位置在箭頭所在的位置以下，容器將完全按照您的顯示方式顯示。
這也使您能夠子菜單和內容，只是有背景顏色，因爲唯一的梯度你似乎有在這兩個地區都在同一區段標題面板中的箭頭。
你可以做一個矩形圖像是寬而短來處理它。使用與頁面其餘部分相同的顏色，以便混合。在所有瀏覽器中檢查它以確保圖像呈現與html顏色相同。對於某些圖像格式，至少在某些瀏覽器中不是這種情況。
關於顏色的好處。如果您使用，請確保不要將顏色配置文件嵌入圖像中，您應該沒問題。 – Ballsacian1 2009-08-06 02:21:11
有這麼多的方式做到這一點...有兩種或三種方法是優於大多數。
這裏是Ballsacian和肖恩正在談論的圖像。忽略底部文本頂部的黑色部分，不完整的截圖採取我的部分。
alt text http://img171.imageshack.us/img171/9392/picture6e.png
可以使箭頭透明的綠色部分，並將其保存爲GIF或PNG，由於斜率看起來是45度（在沒有GIF鋸齒）。如果您更改了圖像，您仍然必須編輯圖像以匹配subnav和內容背景顏色，但透明三角形將自動顯示標題背景顏色。
你也必須去除頭，subnav和內容容器之間的空間。
明確提出這個問題的Photoshop人員希望背景通過在頁眉和子內容/內容之間創建頁邊空白來「自然」展示，但如果沒有箭頭的非語義標記，這是不可能的。你甚至可以在不使用CSS的情況下做到這一點，只是把圖片放在標題後面，在標題和subnav /內容之間。
<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />
然後讓線條變得透明而不是箭頭。現在，如果您更改了標題，subnav或內容背景顏色，但不更改主體背景顏色，則必須更改圖像。這就完成了Photoshop人想要的精神，但最終並不是令人滿意的標記。
我可以看到，這個概念在photoshop中非常棒，你只需要改變每個部分的背景顏色和透明度就可以保持休息，很酷！如果你對如何做到這一點感到困惑，並保持Photoshop傢伙的概念不變，我不會責怪你。基本的HTML和CSS與圖像是不可能的。也許用SVG你可以做到。
爲了好玩，這裏有一個超級優化的sprite方法。這要求您在箭頭和內容頂部漸變之間放置一個巨大的垂直透明空間。然後在subnav的UL和內容容器的div /節中使用此背景。將背景位置設置爲0 - （verticalspace + arrowheight）併爲內容重複x。 3k單個http請求。
如果你想使背景可互換的，你可以用一個PNG，而不是合併的背景到頂部面板背景。 – Ballsacian1 2009-08-06 02:08:48