2012-07-31 49 views
2

我的合作伙伴設計機構給我發佈了一個要轉換成html/css的佈局。 您可以在這裏看到一些佈局,頂部的導航欄是唯一需要的。如何將此佈局轉換爲html/css?

enter image description here

我的問題,現在實際上是,我不知道,如何實現HTML/CSS該佈局,如綠色導航欄「彎曲」是不是在頁面中間。佈局應該靈活,所以我甚至不想使用包含彎曲和居中的一個大圖像(2500x75像素)。如果有兩個元素,一個從左側開始標識,另一個從右側開始,則會更好。

你會如何意識到這一點?

+1

你堅持什麼?沒有試圖不屑一顧,這似乎並不困難;所以我不確定我是否可能在某處丟失了一個細節。 – 2012-07-31 22:22:43

+0

您可以重複背景,例如較粗和較細的線條,只切割導航的凹凸部分。 – 2012-07-31 22:23:23

+2

模糊的圖像困擾着我的眼睛=/ – 2012-07-31 22:31:29

回答

6

你可以做一些事情旋轉<div>,也許是這樣的:

<div class="full"></div> 
<div class="half"> 
    <div class="corner"></div> 
</div>​ 
.full{ 
    height: 40px; 
    background: lightgreen; 
} 
.half{ 
    width: 50%; 
    height: 30px; 
    position: absolute; 
    top: 40px; 
    left: 0; 
    background: lightgreen; 
} 
.corner{ 
    width: 50px; 
    height: 50px; 
    -webkit-transform: rotate(40deg); 
    -webkit-transform-origin: 100% 100%; 
    position: absolute; 
    right: 0px; 
    top: -20px; 
    background: lightgreen; 
} 

現場演示:jsFiddle

改進演示使用CSS歪斜:jsFiddle

+0

andcourse,告別較舊的瀏覽器:)更好的解決辦法是把一些png放在角落裏。 – 2012-07-31 22:40:45

+3

@MiljanPuzović:只要功能和可用性不受影響,就可以爲現代瀏覽器保留增強功能並讓舊版本的用戶體驗降級。 – 2012-07-31 22:42:15

+2

讓我們做一個完整的IE6支持JPG) – 2012-07-31 22:42:46